volume
@@ -3968,10 +4874,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
style={Object {}}
>
cryptography
@@ -4095,42 +5001,6 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
`;
-exports[`Storyshots Tabs Default 1`] = `
-
-
-
-
- Lorem
-
-
- Ipsum
-
-
-
-
- Banana mochi muffin
-
-
-
-
-`;
-
exports[`Storyshots Tag Colored 1`] = `
button': {
+ marginTop: 20
+ }
+ }
+})
+
export default {
argTypes: {
children: { control: { disable: true } },
@@ -16,46 +25,70 @@ export default {
title: 'Banner'
} as Meta
-const Template: Story
= args => (
-
- Once we receive an alert we scan it against policy risk rules. The rules
- are evaluated in order from top to bottom. The first rule that matches
- determines the risk of the alert. Updating a rule will not impact the
- past alerts. However you can use past alerts as a reference to edit
- rules such that future alerts get your desired risk classification.
-
+const DecoratedBannerStory = ({ id, ...rest }: BannerProps) => {
+ const classes = useStyles()
+
+ return (
+
+
+ Once we receive an alert we scan it against policy risk rules.
+ The rules are evaluated in order from top to bottom. The first
+ rule that matches determines the risk of the alert. Updating a
+ rule will not impact the past alerts. However you can use past
+ alerts as a reference to edit rules such that future alerts get
+ your desired risk classification.
+
+ {
+ localStorage.setItem('bannerPref', '{}')
+ window.location.reload()
+ }}
+ >
+ Reset all banners
+
+
+ )
+}
+
+const BannerTemplate: Story = args => (
+ = ({
+ id,
children,
classes = [],
showIcon = false,
title,
type
}: BannerProps) => {
- const [renderBanner, setRenderBanner] = useState(true)
- const componentClasses = useStyles({ renderBanner, type })
+ const componentClasses = useStyles({ type })
const iconClasses = cn({
[componentClasses.icon]: true,
[componentClasses[type]]: true
})
- const toggleRender = () => setRenderBanner(renderBanner => !renderBanner)
+ const banners: Banners = getBannerPreferences()
+
+ const [renderBanner, setRenderBanner] = useState(true)
+
+ useLayoutEffect(() => {
+ if (isNewBanner(banners, id)) {
+ updateBannerPreferences(banners, id, true)
+ } else if (!banners[id]) {
+ setRenderBanner(false)
+ }
+ }, [banners, id])
+
+ const onBannerClose = () => {
+ setRenderBanner(false)
+ updateBannerPreferences(banners, id, false)
+ }
- return (
+ return renderBanner ? (
@@ -109,10 +130,12 @@ export const Banner: FC = ({
{children}
+ ) : (
+ <>
)
}
diff --git a/src/components/Banner/util.ts b/src/components/Banner/util.ts
deleted file mode 100644
index 558f1d4b..00000000
--- a/src/components/Banner/util.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { themedStyles, ThemeType } from 'components/assets/styles'
-
-export const generateThemedBannerStyles = (themeType: ThemeType) => {
- const {
- base: { backgroundColor, color }
- } = themedStyles[themeType]
-
- return {
- backgroundColor: backgroundColor,
- color
- }
-}
diff --git a/src/components/Banner/utils.ts b/src/components/Banner/utils.ts
new file mode 100644
index 00000000..37a00a84
--- /dev/null
+++ b/src/components/Banner/utils.ts
@@ -0,0 +1,38 @@
+import isUndefined from 'lodash/isUndefined'
+import { themedStyles, ThemeType } from 'components/assets/styles'
+
+export const generateThemedBannerStyles = (themeType: ThemeType) => {
+ const {
+ base: { backgroundColor, color }
+ } = themedStyles[themeType]
+
+ return {
+ backgroundColor: backgroundColor,
+ color
+ }
+}
+
+export const BANNER_PREFERENCE = 'bannerPref'
+
+export interface Banners {
+ [key: string]: boolean
+}
+
+export const getBannerPreferences = (): Banners => {
+ const bannerPref = localStorage.getItem(BANNER_PREFERENCE)
+
+ return bannerPref ? JSON.parse(bannerPref) : {}
+}
+
+export const isNewBanner = (banners: Banners, id: string): boolean =>
+ isUndefined(banners[id])
+
+export const updateBannerPreferences = (
+ currentBanners: Banners,
+ id: string,
+ visible: boolean
+) =>
+ localStorage.setItem(
+ BANNER_PREFERENCE,
+ JSON.stringify({ ...currentBanners, [id]: visible })
+ )
diff --git a/src/components/Code/Code.stories.tsx b/src/components/Code/Code.stories.tsx
index b9cc9a4a..f653a9b8 100644
--- a/src/components/Code/Code.stories.tsx
+++ b/src/components/Code/Code.stories.tsx
@@ -19,7 +19,8 @@ const sampleJSON = {
attachedResources: {
'count-of-attached-eni': 3,
'does-any-eni-have-public-ip': true,
- 'are-there-flows-from-internet-in-vpcflows': false
+ 'are-there-flows-from-internet-in-vpcflows': false,
+ 'a-really-really-really-really-really-really-really-really-really-really-really-really-really-really-really-reallyreally-really-really-long-key': null
}
}
},
diff --git a/src/components/Code/CodeControls.tsx b/src/components/Code/CodeControls.tsx
new file mode 100644
index 00000000..ac15fa04
--- /dev/null
+++ b/src/components/Code/CodeControls.tsx
@@ -0,0 +1,74 @@
+import cn from 'classnames'
+import { createUseStyles } from 'react-jss'
+import { faCopy } from '@fortawesome/pro-regular-svg-icons'
+import { generateThemedControlsStyles } from './utils'
+import { IconButton } from 'components/IconButton'
+import { Tooltip } from 'components/Tooltip'
+import React, { FC } from 'react'
+import { styleguide, ThemeType } from 'components/assets/styles'
+
+const { borderRadius, spacing } = styleguide
+
+const { light, dark } = ThemeType
+
+const useStyles = createUseStyles({
+ codeControls: {
+ ...generateThemedControlsStyles(light),
+ borderRadius,
+ padding: `${spacing.xs}px ${spacing.s}px`,
+ position: 'absolute',
+ right: spacing['s+'],
+ top: spacing['s+'],
+ zIndex: 1
+ },
+ iconButton: {
+ padding: {
+ left: spacing.s,
+ right: spacing.s
+ }
+ },
+ // eslint-disable-next-line sort-keys
+ '@global': {
+ [`.${dark}`]: {
+ '& $codeControls': generateThemedControlsStyles(dark)
+ }
+ }
+})
+
+// This is left as an object so more controls (e.g. download) can be added later
+export interface DisplayCodeControls {
+ copy?: boolean
+}
+
+interface Props {
+ classes?: string[]
+ displayControls?: DisplayCodeControls
+ isCopied?: boolean
+ onClickCopyCode: () => void
+}
+
+export const CodeControls: FC = ({
+ classes = [],
+ displayControls = {},
+ isCopied = false,
+ onClickCopyCode
+}: Props) => {
+ const compClasses = useStyles()
+
+ const { copy = true } = displayControls
+
+ return (
+
+ {copy && (
+
+
+ )}
+
+ )
+}
diff --git a/src/components/Code/index.tsx b/src/components/Code/index.tsx
index b08fbac5..20ad8a4a 100644
--- a/src/components/Code/index.tsx
+++ b/src/components/Code/index.tsx
@@ -2,15 +2,18 @@ import './prism.css'
import cn from 'classnames'
import Mark from 'mark.js'
import Prism from 'prismjs'
-import { useStyles } from './utils'
+import { CodeControls, DisplayCodeControls } from './CodeControls'
+import { CodeType, copyToClipboard, stringifyCode, useStyles } from './utils'
import { Input, InputProps } from 'components/Input'
-import React, { ChangeEvent, FC, useEffect, useRef } from 'react'
+import React, { ChangeEvent, FC, useEffect, useRef, useState } from 'react'
+
require('prismjs/plugins/line-numbers/prism-line-numbers')
require('prismjs/components/prism-json')
export interface CodeProps {
classes?: string[]
- code: string | Record
+ code: CodeType
+ displayControls?: DisplayCodeControls | false
language?: 'css' | 'html' | 'javascript' | 'json'
lineNumbers?: boolean
readOnly?: boolean
@@ -22,6 +25,7 @@ export interface CodeProps {
export const Code: FC = ({
classes = [],
code,
+ displayControls = {},
language = 'json',
lineNumbers = true,
readOnly = true,
@@ -30,6 +34,15 @@ export const Code: FC = ({
const compClasses = useStyles()
const codeRef = useRef(null)
+ const [isCopied, setIsCopied] = useState(false)
+
+ const copyCode = () =>
+ copyToClipboard(stringifyCode(code), () => setIsCopied(true))
+
+ useEffect(() => {
+ if (isCopied) setTimeout(() => setIsCopied(false), 1250)
+ }, [isCopied])
+
useEffect(() => {
/**
* We want to highlight the code after it is rendered onto the page,
@@ -71,16 +84,25 @@ export const Code: FC = ({
return (
{search &&
}
-
-
- {typeof code === 'string'
- ? code
- : JSON.stringify(code, null, '\t')}
-
-
+
+ {displayControls && (
+
+ )}
+
+
+ {stringifyCode(code)}
+
+
+
+
+export const stringifyCode = (code: CodeType): string =>
+ isObject(code) ? JSON.stringify(code, null, '\t') : code
+
+/* -x-x-x-x-x-x-x-x- Styles Related -x-x-x-x-x-x-x-x- */
+
const generateThemedCodeStyles = (themeType: ThemeType) => {
const { background } = codePalette[themeType]
@@ -32,6 +52,65 @@ const generateThemedCodeStyles = (themeType: ThemeType) => {
}
}
+export const generateThemedControlsStyles = (themeType: ThemeType) => {
+ const {
+ base: { borderColor }
+ } = themedStyles[themeType]
+
+ return {
+ background: themes[themeType].background.secondary,
+ border: `1px solid ${borderColor}`
+ }
+}
+
+/* -------------- Prism Colors -------------- */
+
+const darkCommonColor = themedStyles[dark].base.color
+const lightCommonColor = themedStyles[light].base.color
+
+const { shade } = ColorManipulationTypes
+
+export const tokenColors = {
+ [dark]: {
+ boolean: reds.base,
+ char: darkCommonColor,
+ className: darkCommonColor,
+ comment: darkCommonColor,
+ function: darkCommonColor,
+ keyword: reds.base,
+ lineHighlight: darkCommonColor,
+ method: darkCommonColor,
+ number: reds.base,
+ operator: darkCommonColor,
+ primitive: darkCommonColor,
+ property: oranges.base,
+ punctuation: darkCommonColor,
+ string: manipulateColor(greens.base, 20, shade),
+ tag: darkCommonColor,
+ variable: darkCommonColor
+ },
+ [light]: {
+ boolean: oranges.base,
+ char: lightCommonColor,
+ className: lightCommonColor,
+ comment: lightCommonColor,
+ function: lightCommonColor,
+ keyword: oranges.base,
+ lineHighlight: lightCommonColor,
+ method: lightCommonColor,
+ number: oranges.base,
+ operator: lightCommonColor,
+ primitive: lightCommonColor,
+ property: reds.base,
+ punctuation: lightCommonColor,
+ string: manipulateColor(greens.base, 10, shade),
+ tag: lightCommonColor,
+ variable: lightCommonColor
+ }
+}
+
+/* ------------------------------------------ */
+
const generateThemedPreCodeStyles = (themeType: ThemeType) => {
const { background } = codePalette[themeType]
@@ -39,27 +118,8 @@ const generateThemedPreCodeStyles = (themeType: ThemeType) => {
base: { color }
} = themedStyles[themeType]
- const prismColors = {
- boolean: color,
- char: color,
- className: color,
- comment: color,
- function: color,
- keyword: color,
- lineHighlight: color,
- method: color,
- number: color,
- operator: color,
- primitive: color,
- property: color,
- punctuation: color,
- string: color,
- tag: color,
- variable: color
- }
-
return {
- ...Object.entries(prismColors).reduce(
+ ...Object.entries(tokenColors[themeType]).reduce(
(acc, [key, val]) => ({
...acc,
[`& .token.${key}`]: {
@@ -96,6 +156,8 @@ const preCodeSelector = "pre[class*='language-']"
/* eslint-enable quotes */
export const useStyles = createUseStyles({
+ controls: { opacity: 0 },
+ // eslint-disable-next-line sort-keys
'@global': {
[preCodeSelector]: {
'& .line-numbers-rows': {
@@ -107,6 +169,7 @@ export const useStyles = createUseStyles({
...font.label,
fontFamily: 'Fira Code, monospace',
fontWeight: fontWeight.light,
+ tabSize: 3,
textShadow: 'none'
},
...generateThemedCodeStyles(light),
@@ -125,5 +188,14 @@ export const useStyles = createUseStyles({
},
search: {
marginBottom: spacing.m
+ },
+ wrapper: {
+ '&:hover': {
+ '& $controls': { opacity: 1 }
+ },
+ height: '100%',
+ overflow: 'auto',
+ position: 'relative',
+ width: '100%'
}
})
diff --git a/src/components/Filters/BaseFilters.tsx b/src/components/Filters/BaseFilters.tsx
new file mode 100644
index 00000000..1d8e0c3c
--- /dev/null
+++ b/src/components/Filters/BaseFilters.tsx
@@ -0,0 +1,197 @@
+import cloneDeep from 'lodash/cloneDeep'
+import { faFilter } from '@fortawesome/free-solid-svg-icons'
+import { FilterPopover } from './FilterPopover'
+import find from 'lodash/find'
+import { Icon } from '../Icon'
+import { IconButton } from '../IconButton'
+import { Skeleton } from '../Skeleton'
+import startCase from 'lodash/startCase'
+import { styleguide } from '../assets/styles'
+import truncate from 'lodash/truncate'
+import { useBaseFilterStyles } from './styles'
+import { useFiltersContext } from './FiltersContext'
+import { useShortcut } from '@dassana-io/web-utils'
+import { v4 as uuidV4 } from 'uuid'
+import { filterSelectedFilters, formatSelectedFilters } from './utils'
+import { FiltersList, FiltersListItem } from './types'
+import React, { ReactNode, useEffect, useState } from 'react'
+
+const { spacing } = styleguide
+
+const truncateLength = 15
+
+export const BaseFilters = () => {
+ const {
+ config,
+ loading,
+ onSelectedFiltersChange,
+ resetDynamicProps
+ } = useFiltersContext()
+
+ const [filtersList, setFiltersList] = useState([
+ { id: uuidV4() }
+ ])
+
+ const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+
+ useEffect(() => {
+ if (!isPopoverOpen && resetDynamicProps) resetDynamicProps()
+ }, [isPopoverOpen, resetDynamicProps])
+
+ const classes = useBaseFilterStyles()
+
+ const closePopover = () => setIsPopoverOpen(false)
+ const openPopover = () => setIsPopoverOpen(true)
+
+ const resetFiltersList = () => setFiltersList([])
+
+ const togglePopoverVisibility = (isPopoverOpen: boolean) =>
+ setIsPopoverOpen(isPopoverOpen)
+
+ useShortcut({
+ callback: closePopover,
+ key: 'Escape',
+ keyEvent: 'keydown'
+ })
+
+ const onClickAddFilter = () =>
+ setFiltersList(oldFiltersList => [...oldFiltersList, { id: uuidV4() }])
+
+ // When a FilterUnit is deleted,
+ // filter out the filtersListItem by id from filtersList
+ // and update state with the filtered items
+ const onDelete = (selectedId: string) => {
+ const filteredItems = filtersList.filter(item => item.id !== selectedId)
+
+ setFiltersList(filteredItems)
+ }
+
+ // When any of the filter items gets updated — operator, key or values,
+ // this callback will be called with the id of the updated filtersListItem
+ // and the updated filter item(s).
+ // E.g. if operator is updated, the cb will be called with:
+ // { id: 'some-uuid', selectedOperator: '=' }
+ const onFilterChange = ({
+ id,
+ selectedOperator,
+ selectedKey,
+ selectedValues
+ }: FiltersListItem) => {
+ const clonedFilters = cloneDeep(filtersList)
+
+ const selectedItem = find(clonedFilters, filter => filter.id === id)
+
+ if (selectedItem) {
+ if (selectedKey) {
+ selectedItem.selectedKey = selectedKey
+ } else if (selectedOperator) {
+ selectedItem.selectedOperator = selectedOperator
+
+ onSelectedFiltersChange(formatSelectedFilters(clonedFilters))
+ } else {
+ selectedItem.selectedValues = selectedValues
+
+ onSelectedFiltersChange(formatSelectedFilters(clonedFilters))
+ }
+
+ setFiltersList(clonedFilters)
+ }
+ }
+
+ const renderFiltersSummary = () =>
+ filterSelectedFilters(filtersList).map(
+ ({ selectedKey, selectedOperator = '=', selectedValues = [] }) => {
+ let values: string[] | ReactNode[]
+
+ const iconConfig = config?.iconConfig
+
+ // If config.iconConfig exists and the filterKey in that config
+ // matches the current config, render icons.
+ if (iconConfig && iconConfig.filterKey === selectedKey) {
+ const iconMap = iconConfig.iconMap
+
+ values = selectedValues.map(({ text, value }) =>
+ // If value exists in the iconMap, render the icon.
+ // Otherwise render correctly truncated text (to prevent "undefined" from being displayed).
+ iconMap[value] ? (
+
+ [
+
+ {keyStr}
+
+ {selectedOperator}
+
+ {values.map(
+ (val: string | ReactNode, valIndex: number) => (
+
+ {val}
+
+ )
+ )}
+
+ ]
+
+ )
+ }
+ )
+
+ const renderFilterControls = () => (
+
+
+
+ {renderFiltersSummary()}
+
+
= ({
+ filterOptions = [],
+ ...rest
+}: ClientSideFiltersProps) => {
+ return (
+
+
+ )
+}
diff --git a/src/components/Filters/FilterPopover.tsx b/src/components/Filters/FilterPopover.tsx
index 0bb9be22..c0be45bb 100644
--- a/src/components/Filters/FilterPopover.tsx
+++ b/src/components/Filters/FilterPopover.tsx
@@ -1,46 +1,38 @@
-import { Button } from 'components/Button'
+import { Button } from '../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 { Link } from '../Link'
+import { Popover } from '../Popover'
+import { useFiltersContext } from './FiltersContext'
+import { usePopoverStyles } from './styles'
+import { FiltersList, FiltersListItem } from './types'
+import { IconButton, IconSizes } from '../IconButton'
import React, { FC } from 'react'
interface FilterPopoverProps {
- allFilters: ProcessedFilters
closePopover: () => void
- dynamicOptions?: SelectOption[]
- dynamicSearchVal: string
filtersList: FiltersList
- onVisibleChange: (visible: boolean) => void
+ isPopoverOpen?: boolean
onClickAddFilter: () => void
onDelete: (selectedId: string) => void
- onFilterChange: (selectedId: string, selection: string | string[]) => void
- onSearchWrapper: OnSearchWrapper
- pending: boolean
- setFiltersList: React.Dispatch>
- visible?: boolean
+ onFilterChange: (filtersListItem: FiltersListItem) => void
+ resetFiltersList: () => void
+ togglePopoverVisibility: (isPopoverOpen: boolean) => void
}
export const FilterPopover: FC = ({
- allFilters,
closePopover,
- dynamicOptions,
- dynamicSearchVal,
- filtersList,
- onVisibleChange,
+ filtersList = [],
+ isPopoverOpen = false,
onClickAddFilter,
onDelete,
onFilterChange,
- onSearchWrapper,
- pending,
- setFiltersList,
- visible = false
+ resetFiltersList,
+ togglePopoverVisibility
}: FilterPopoverProps) => {
+ const { allFilters } = useFiltersContext()
+
const classes = usePopoverStyles()
return (
@@ -70,38 +62,59 @@ export const FilterPopover: FC = ({
{filtersList.length > 0 && (
- {filtersList.map((filterItem, i) => (
-
}
- onVisibleChange={onVisibleChange}
+ onVisibleChange={togglePopoverVisibility}
placement='bottomLeft'
popupContainerSelector='#filters-popup-wrapper'
popupTriggerClasses={[classes.popoverTrigger]}
trigger='click'
- visible={visible}
+ visible={isPopoverOpen}
>
+ {/*
is just a placeholder. The filter controls that triggers
+ the popover lives in ./BaseFilters. This was done because positioning
+ the Popover to cover the controls is easier when it's not a child of the
+ Popover.
+ */}
)
diff --git a/src/components/Filters/FilterUnit.tsx b/src/components/Filters/FilterUnit.tsx
deleted file mode 100644
index e4cfd9cd..00000000
--- a/src/components/Filters/FilterUnit.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-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
= ({
- id,
- allFilters = {},
- dynamicOptions,
- dynamicSearchVal,
- filtersList = [],
- onDelete,
- onFilterChange,
- onSearchWrapper,
- pending,
- selectedFilterKey = ''
-}: FilterUnitProps) => {
- const classes = useFilterUnitStyles()
-
- const renderKey = () => (
-
- 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 (
- onFilterChange(id, values)}
- options={options}
- placeholder='Select field'
- searchPlaceholder='Search'
- showSearch
- {...dynamicFilterProps}
- />
- )
- }
-
- return (
-
-
{renderKey()}
-
-
{renderValues()}
-
onDelete(id)} />
- = ({
+ id,
+ filterOptValues,
+ onFilterChange,
+ optionsConfig,
+ selectedKey,
+ selectedValues = []
+}: ValuesMultiSelectProps) => {
+ const [options, setOptions] = useState([])
+
+ useEffect(() => {
+ // if a filter key has been selected and the filter values exist,
+ // format it and save it to state as options
+ if (selectedKey && filterOptValues) {
+ const formattedOpts = formatFilterValsToSelectOpts(
+ filterOptValues,
+ !!optionsConfig
+ )
+
+ setOptions(formattedOpts)
+ }
+ }, [filterOptValues, optionsConfig, selectedKey])
+
+ return (
+ = ({
+ id,
+ onFilterChange,
+ filterOptValues,
+ selectedKey,
+ optionsConfig,
+ selectedValues = [],
+ staticFilter
+}: Props) => {
+ const {
+ dynamicOptions,
+ dynamicSearchVal,
+ onSearchWrapper,
+ pending
+ } = useFiltersContext()
+
+ const classes = useStyles()
+ const [dynamicFilterProps, setDynamicFilterProps] = useState<
+ Pick
+ >({})
+ const [options, setOptions] = useState(selectedValues)
+
+ useEffect(() => {
+ if (selectedKey && filterOptValues) {
+ // if filter is static, options will be the opts that BE initially gave
+ if (staticFilter) {
+ const formattedOpts = formatFilterValsToSelectOpts(
+ filterOptValues,
+ !!optionsConfig
+ )
+
+ setOptions(
+ uniqBy(
+ [...selectedValues, ...formattedOpts],
+ 'value'
+ ).map(option => omit(option, 'classes'))
+ )
+ } else {
+ // if filter is dynamic & state is pending, data is still being fetched. 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) {
+ const formattedOpts = formatFilterValsToSelectOpts(
+ filterOptValues,
+ !!optionsConfig
+ )
+
+ setOptions(
+ uniqBy(
+ [...selectedValues, ...formattedOpts],
+ 'value'
+ ).map(option => omit(option, 'classes'))
+ )
+ } 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) {
+ const allOpts = uniqBy(
+ [...selectedValues, ...dynamicOptions],
+ 'value'
+ )
+
+ setOptions(
+ allOpts.map(item =>
+ find(dynamicOptions, omit(item, 'classes'))
+ ? item
+ : {
+ ...item,
+ classes: [classes.hiddenOpts]
+ // eslint-disable-next-line no-mixed-spaces-and-tabs
+ }
+ )
+ )
+ }
+
+ // 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 formattedOpts = uniqBy(
+ [
+ ...formatFilterValsToSelectOpts(
+ [...filterOptValues],
+ !!optionsConfig
+ ),
+ ...selectedValues
+ ],
+ 'value'
+ )
+
+ setOptions(
+ uniqBy(
+ [
+ ...selectedValues,
+ ...formattedOpts
+ ].map(option => omit(option, 'classes')),
+ 'value'
+ )
+ )
+ }
+ }
+ }
+
+ // these dynamic filter props should be there for all dynamic filters
+ setDynamicFilterProps({
+ onSearch: onSearchWrapper
+ ? onSearchWrapper(selectedKey)
+ : undefined,
+ pending,
+ searchPlaceholder: 'This one hits BE...'
+ })
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [
+ dynamicOptions,
+ dynamicSearchVal,
+ onSearchWrapper,
+ optionsConfig,
+ pending,
+ selectedKey
+ ])
+
+ return (
+ {
+ onFilterChange: (filtersListItem: FiltersListItem) => void
+ filterOptValues?: FilterOption['values']
+ optionsConfig?: SelectOptionsConfig
+}
diff --git a/src/components/Filters/FilterUnit/ValuesMultiSelect/utils.ts b/src/components/Filters/FilterUnit/ValuesMultiSelect/utils.ts
new file mode 100644
index 00000000..a01b478b
--- /dev/null
+++ b/src/components/Filters/FilterUnit/ValuesMultiSelect/utils.ts
@@ -0,0 +1,49 @@
+import { MultiSelectProps } from '../../../Select'
+import { ValuesMultiSelectProps } from './types'
+
+type DefaultCommonProps = Pick<
+ MultiSelectProps,
+ | 'matchSelectedContentWidth'
+ | 'maxTagCount'
+ | 'placeholder'
+ | 'searchPlaceholder'
+ | 'showSearch'
+>
+
+const defaultCommonProps: DefaultCommonProps = {
+ matchSelectedContentWidth: 225,
+ maxTagCount: 5,
+ placeholder: 'Select field',
+ searchPlaceholder: 'Search',
+ showSearch: true
+}
+
+interface Params
+ extends Pick<
+ ValuesMultiSelectProps,
+ 'id' | 'onFilterChange' | 'selectedValues'
+ > {
+ multiSelectProps: Omit
+}
+
+export const getMultiSelectProps = ({
+ multiSelectProps,
+ id,
+ onFilterChange,
+ selectedValues = []
+}: Params): MultiSelectProps => {
+ const { options, ...rest } = multiSelectProps
+
+ return {
+ ...defaultCommonProps,
+ ...rest,
+ disabled: !options.length,
+ onChange: vals =>
+ onFilterChange({
+ id,
+ selectedValues: options.filter(opt => vals.includes(opt.value))
+ }),
+ options,
+ values: selectedValues.map(values => values.value)
+ }
+}
diff --git a/src/components/Filters/FilterUnit/index.tsx b/src/components/Filters/FilterUnit/index.tsx
new file mode 100644
index 00000000..3a068e47
--- /dev/null
+++ b/src/components/Filters/FilterUnit/index.tsx
@@ -0,0 +1,140 @@
+import { FilterOption } from '../../api'
+import { IconButton } from '../../IconButton'
+import { useFiltersContext } from '../FiltersContext'
+import { useFilterUnitStyles } from '../styles'
+import { ValuesMultiSelectProps } from './ValuesMultiSelect/types'
+import { ClientSideValuesMS, ServerSideValuesMS } from './ValuesMultiSelect'
+import { FiltersList, FiltersListItem } from '../types'
+import { formatFilterStrToSelectOpts, getFilterKeysOptions } from '../utils'
+import { MultiSelectProps, Select } from '../../Select'
+import React, { FC, useEffect, useState } from 'react'
+
+interface FilterUnitProps
+ extends Pick<
+ FiltersListItem,
+ 'id' | 'selectedKey' | 'selectedOperator' | 'selectedValues'
+ > {
+ filtersList: FiltersList
+ filterOptOperator?: FilterOption['operator']
+ filterOptValues?: FilterOption['values']
+ onDelete: (selectedId: string) => void
+ onFilterChange: (filtersListItem: FiltersListItem) => void
+ staticFilter?: boolean
+}
+
+const FilterUnit: FC = ({
+ id,
+ filtersList = [],
+ onDelete,
+ onFilterChange,
+ filterOptOperator,
+ filterOptValues,
+ selectedKey,
+ selectedOperator,
+ selectedValues,
+ staticFilter
+}: FilterUnitProps) => {
+ const { allFilters, config, mode } = useFiltersContext()
+
+ const classes = useFilterUnitStyles()
+
+ const [operators, setOperators] = useState(['='])
+ const [optionsConfig, setOptionsConfig] = useState<
+ MultiSelectProps['optionsConfig']
+ >()
+
+ useEffect(() => {
+ // When the selectedKey changes, get operators
+ const operatorArr = filterOptOperator
+
+ // If BE provides operators, update the operators saved in state
+ if (operatorArr && operatorArr.length) {
+ setOperators(operatorArr)
+ }
+
+ // When selectedKey changes, the first item in operators should be selected
+ // We need to call onFilterChange so we can keep track of the selected operator
+ onFilterChange({
+ id,
+ selectedOperator: operatorArr ? operatorArr[0] : operators[0]
+ })
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [id, selectedKey])
+
+ useEffect(() => {
+ const iconConfig = config?.iconConfig
+
+ // if iconConfig exists in FiltersConfig and the filterKey in the
+ // iconConfig matches the selectedKey, use iconConfig.iconMap
+ // to define optionsConfig and save it to state. It'll be passed to
+ // Filter Values MultiSelect (rendered in renderValues()).
+ if (iconConfig && selectedKey === iconConfig.filterKey) {
+ setOptionsConfig({
+ iconMap: iconConfig.iconMap
+ })
+ }
+ }, [config, selectedKey])
+
+ const renderOperator = () => (
+
+ onFilterChange({
+ id,
+ selectedOperator: (selectedOperator as unknown) as string
+ })
+ }
+ options={formatFilterStrToSelectOpts(operators)}
+ showSearch
+ value={selectedOperator || operators[0]}
+ />
+ )
+
+ const renderKey = () => (
+ {
+ onFilterChange({
+ id,
+ selectedKey: (selectedKey as unknown) as string
+ })
+ }}
+ options={formatFilterStrToSelectOpts(
+ getFilterKeysOptions(allFilters, filtersList)
+ )}
+ placeholder='Select Value'
+ showSearch
+ value={selectedKey}
+ />
+ )
+
+ const renderValues = () => {
+ const commonProps: ValuesMultiSelectProps = {
+ filterOptValues,
+ id,
+ onFilterChange,
+ optionsConfig,
+ selectedKey,
+ selectedValues
+ }
+
+ return mode === 'frontend' ? (
+
+
{renderKey()}
+
{renderOperator()}
+
{renderValues()}
+
onDelete(id)} />
+ = args => = ({
- 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 (
-
- )
-}
diff --git a/src/components/Filters/FiltersContext.ts b/src/components/Filters/FiltersContext.ts
new file mode 100644
index 00000000..2707552a
--- /dev/null
+++ b/src/components/Filters/FiltersContext.ts
@@ -0,0 +1,26 @@
+import { createCtx } from '@dassana-io/web-utils'
+import { SelectOption } from '../Select'
+import {
+ FiltersConfig,
+ FiltersMode,
+ FiltersProps,
+ OnSearchWrapper,
+ ProcessedFilters
+} from './types'
+
+export interface FiltersContextProps {
+ allFilters: ProcessedFilters
+ config?: FiltersConfig
+ dynamicOptions?: SelectOption[]
+ dynamicSearchVal?: string
+ loading?: boolean
+ mode: FiltersMode
+ onSearchWrapper?: OnSearchWrapper
+ onSelectedFiltersChange: FiltersProps['onSelectedFiltersChange']
+ pending?: boolean
+ resetDynamicProps?: () => void
+}
+
+const [useFiltersContext, FiltersCtxProvider] = createCtx()
+
+export { FiltersCtxProvider, useFiltersContext }
diff --git a/src/components/Filters/ServerSideFilters/index.tsx b/src/components/Filters/ServerSideFilters/index.tsx
new file mode 100644
index 00000000..b1e127aa
--- /dev/null
+++ b/src/components/Filters/ServerSideFilters/index.tsx
@@ -0,0 +1,27 @@
+import { BaseFilters } from '../BaseFilters'
+import { FiltersCtxProvider } from '../FiltersContext'
+import { ServerSideFiltersProps } from '../types'
+import { useFilters } from './utils'
+import React, { FC } from 'react'
+
+export const ServerSideFilters: FC = ({
+ api,
+ emitter,
+ endpoint,
+ ...rest
+}: ServerSideFiltersProps) => {
+ // useFilters is where all the related data will be held.
+ // API calls will also be handled in useFilters.
+ const filterMethods = useFilters(endpoint, api, emitter)
+
+ return (
+
+
+ )
+}
diff --git a/src/components/Filters/ServerSideFilters/utils.ts b/src/components/Filters/ServerSideFilters/utils.ts
new file mode 100644
index 00000000..469ceb88
--- /dev/null
+++ b/src/components/Filters/ServerSideFilters/utils.ts
@@ -0,0 +1,128 @@
+// import { handleAjaxErrors } from '@dassana-io/web-utils'
+import isEmpty from 'lodash/isEmpty'
+import { SelectOption } from '../../Select'
+import { AxiosInstance, Emitter } from '@dassana-io/web-utils'
+import { formatFilterValsToSelectOpts, processFilters } from '../utils'
+import {
+ mockDynamicFilterOptions,
+ mockFilterOptions
+} from '../fixtures/0_sample_data'
+import { OnSearchWrapper, ProcessedFilters } from '../types'
+import { useEffect, useState } from 'react'
+
+export const useFilters = (
+ endpoint: string,
+ api: AxiosInstance,
+ emitter: Emitter
+) => {
+ const [allFilters, setAllFilters] = useState({})
+
+ const [dynamicOptions, setDynamicOptions] = useState<
+ SelectOption[] | undefined
+ >(undefined)
+
+ const [dynamicSearchVal, setDynamicSearchVal] = useState('')
+
+ 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 dataToSend: FilterSuggestions = {
+ // filterKey: selectedFilterKey,
+ // operator: '=',
+ // filters: formatSelectedFilters(filtersList),
+ // search: searchVal
+ // }
+ // const result = await api.post(endpoint, dataToSend)
+ // 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(resolve => {
+ setTimeout(() => {
+ cb()
+ resolve()
+ }, timeout)
+ })
+
+ await setAsyncTimeout(() => {
+ setDynamicOptions(
+ formatFilterValsToSelectOpts(mockDynamicFilterOptions)
+ )
+ setPending(false)
+ }, 400)
+ // -----------------
+ }
+
+ const resetDynamicProps = () => {
+ setDynamicSearchVal('')
+ setDynamicOptions(undefined)
+ setPending(false)
+ }
+
+ useEffect(() => {
+ // const getFilters = async () => {
+ // try {
+ // const result = await api.get(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)
+ // -----------------
+
+ return () => {
+ setAllFilters({})
+ }
+ }, [api, emitter, endpoint])
+
+ useEffect(() => {
+ setLoading(isEmpty(allFilters))
+
+ return () => {
+ setLoading(true)
+ }
+ }, [allFilters])
+
+ return {
+ allFilters,
+ dynamicOptions,
+ dynamicSearchVal,
+ loading,
+ onSearchWrapper,
+ pending,
+ resetDynamicProps
+ }
+}
diff --git a/src/components/Filters/fixtures/0_sample_data.ts b/src/components/Filters/fixtures/0_sample_data.ts
index d69d4976..1b602079 100644
--- a/src/components/Filters/fixtures/0_sample_data.ts
+++ b/src/components/Filters/fixtures/0_sample_data.ts
@@ -1,46 +1,78 @@
-import { FilterOptions } from '../types'
+import { FiltersConfig } from '../types'
+import { FilterOptions, FilterValues } from '../../api'
-export const mockDynamicFilterOptions = [
+export const mockDynamicFilterOptions: FilterValues = [
{
- id: '5391d028-d5fe-4c33-a4c9-8719191aaeb1',
- name: 'Ingestion Dev Account'
+ id: 'name4',
+ value: 'Ingestion Dev Account'
},
{
- id: '5391d028-d5fe-4c33-a4c9-8719191aaeb8',
- name: 'Ingestion Prod Account'
+ id: 'name5',
+ value: 'Ingestion Prod Account'
}
]
export const mockFilterOptions: FilterOptions = [
{
- filterKey: 'name',
- options: [
- 'Dev account',
- 'Prod account 1',
- 'Prod account 2',
- 'Test account'
- ],
- staticFilter: false
+ key: 'name',
+ staticFilter: false,
+ values: [
+ { id: 'name0', value: 'Dev account' },
+ { id: 'name1', value: 'Prod account 1' },
+ { id: 'name2', value: 'Prod account 2' },
+ { id: 'name3', value: 'Test account' }
+ ]
},
{
- filterKey: 'service',
- options: [
- 'EC2',
- 'S3',
- 'RDS',
- 'Amazon Keyspaces (for Apache Cassandra)',
- 'EKS'
- ],
- staticFilter: true
+ key: 'service',
+ staticFilter: true,
+ values: [
+ { id: 'service0', value: 'EC2' },
+ { id: 'service1', value: 'S3' },
+ { id: 'service2', value: 'RDS' },
+ {
+ id: 'service3',
+ value: 'Amazon Keyspaces (for Apache Cassandra)'
+ },
+ { id: 'service4', value: 'EKS' }
+ ]
},
{
- filterKey: 'model',
- options: ['instance', 'bucket', 'table'],
- staticFilter: true
+ key: 'model',
+ staticFilter: true,
+ values: [
+ { id: 'model0', value: 'instance' },
+ { id: 'model1', value: 'bucket' },
+ { id: 'model2', value: 'table' }
+ ]
},
{
- filterKey: 'region',
- options: ['us-west-1', 'us-east-2', 'ap-south-1'],
- staticFilter: true
+ key: 'region',
+ operator: ['!=', '='],
+ staticFilter: true,
+ values: [
+ { id: 'region0', value: 'us-west-1' },
+ { id: 'region1', value: 'us-east-2' },
+ { id: 'region2', value: 'ap-south-1' }
+ ]
+ },
+ {
+ key: 'vendors',
+ staticFilter: true,
+ values: [
+ { id: 'aws', value: 'Aws' },
+ { id: 'azure', value: 'Azure' },
+ { id: 'dassana', value: 'Dassana' }
+ ]
}
]
+
+export const filtersConfig: FiltersConfig = {
+ iconConfig: {
+ filterKey: 'vendors',
+ iconMap: {
+ aws: 'https://dummyimage.com/400x400/ff9900/fff&text=A',
+ azure: 'https://dummyimage.com/400x400/0072c6/fff&text=A'
+ }
+ }
+}
diff --git a/src/components/Filters/index.ts b/src/components/Filters/index.ts
deleted file mode 100644
index 9c59fb13..00000000
--- a/src/components/Filters/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './types'
-export * from './Filters'
diff --git a/src/components/Filters/index.tsx b/src/components/Filters/index.tsx
new file mode 100644
index 00000000..e6c662c8
--- /dev/null
+++ b/src/components/Filters/index.tsx
@@ -0,0 +1,13 @@
+import { ClientSideFilters } from './ClientSideFilters'
+import { ServerSideFilters } from './ServerSideFilters'
+import { FiltersMode, FiltersProps } from './types'
+import React, { FC } from 'react'
+
+export const Filters: FC = (props: FiltersProps) =>
+ props.mode === FiltersMode.frontend ? (
+
-}
-
-export type FilterOptions = FilterOption[]
+import { FilterOption, Filters } from '../api'
+import { MultiSelectProps, SelectOption } from '../Select'
export interface FiltersListItem {
id: string
+ selectedOperator?: string
selectedKey?: string
- selectedValues?: string[]
+ selectedValues?: SelectOption[]
}
type SelectedValsFilter = Required
@@ -30,13 +19,44 @@ export interface ProcessedFilters {
[key: string]: FilterOption
}
-export interface FiltersProps {
+export interface FiltersConfig {
+ iconConfig?: {
+ filterKey: string
+ iconMap: {
+ [key: string]: string
+ }
+ }
+}
+
+export interface SharedFiltersProps {
+ config?: FiltersConfig
+ onSelectedFiltersChange: (selectedFilters: Filters) => void
+}
+
+export type ClientSideFilterOption = Omit<
+ FilterOption,
+ 'operator' | 'staticFilter'
+>
+
+export enum FiltersMode {
+ backend = 'backend',
+ frontend = 'frontend'
+}
+
+export interface ClientSideFiltersProps extends SharedFiltersProps {
+ filterOptions: ClientSideFilterOption[]
+ mode: FiltersMode.frontend
+}
+
+export interface ServerSideFiltersProps extends SharedFiltersProps {
api: AxiosInstance
emitter: Emitter
endpoint: string
- onSelectedFiltersChange: (selectedFilters: Filter[]) => void
+ mode: FiltersMode.backend
}
+export type FiltersProps = ClientSideFiltersProps | ServerSideFiltersProps
+
export interface OnSearchWrapper {
(selectedFilterKey: string): MultiSelectProps['onSearch']
}
diff --git a/src/components/Filters/utils.ts b/src/components/Filters/utils.ts
index ae264e56..d5b0a543 100644
--- a/src/components/Filters/utils.ts
+++ b/src/components/Filters/utils.ts
@@ -1,39 +1,11 @@
-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 { SelectOption } from '../Select'
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 './fixtures/0_sample_data'
-import { styleguide, ThemeType } from 'components/assets/styles'
-import { useEffect, useState } from 'react'
+import { FilterOptions, Filters, FilterValues } from '../api'
+import { FiltersList, ProcessedFilters, SelectedValsFilters } from './types'
+// import { FilterSuggestions } from 'api'
-const {
- borderRadius,
- colors: { blacks, grays },
- flexAlignCenter,
- font,
- fontWeight,
- spacing
-} = styleguide
-
-const { dark, light } = ThemeType
-
-const filterSelectedFilters: (
+export const filterSelectedFilters: (
filtersList: FiltersList
) => SelectedValsFilters = filtersList =>
filtersList.filter(
@@ -41,74 +13,43 @@ const filterSelectedFilters: (
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)
+export const formatFilterValsToSelectOpts = (
+ options: FilterValues,
+ isIcon?: boolean
+): SelectOption[] =>
+ options.map(({ id, value }) => {
+ let optionalProps
- const valuesStr = selectedValues
- .map(val => truncate(val, { length: 15 }))
- .join(', ')
+ if (isIcon) optionalProps = { iconKey: id }
- return `[ ${keyStr} = ${valuesStr} ]`
+ return {
+ text: value,
+ value: id,
+ ...optionalProps
}
- )
-
- return formattedFilters.join(' + ')
-}
+ })
-const formatDynamicOptions = (dynamicOptions: DynamicOption[]) =>
- dynamicOptions.map(
- option => ({ text: option.name, value: option.name } as SelectOption)
- )
+// --------------------------------------
-export const formatFilterOptions = (options: string[]) =>
+export const formatFilterStrToSelectOpts = (options: string[]) =>
options.map(option => ({ text: option, value: option } as SelectOption))
+// --------------------------------------
+
export const formatSelectedFilters: (
filtersList: FiltersList
-) => Filter[] = filtersList => {
+) => Filters = filtersList => {
const filtersWithSelectedVals = filterSelectedFilters(filtersList)
- const formattedFilters: Filter[] = []
-
- filtersWithSelectedVals.forEach(filterItem => {
- filterItem.selectedValues.forEach(val => {
- formattedFilters.push({
- key: filterItem.selectedKey,
- value: val
- })
+ return filtersWithSelectedVals.map(
+ ({ selectedKey, selectedOperator = '=', selectedValues = [] }) => ({
+ key: selectedKey,
+ operator: selectedOperator || '=',
+ value: selectedValues?.map(selectedValue => selectedValue.value)
})
- })
-
- 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 }
+ )
}
// --------------------------------------
@@ -128,205 +69,20 @@ export const getFilterKeysOptions = (
return xor(unavailableKeysArr, allKeysArr)
}
+// --------------------------------------
+
export const processFilters = (filterOptions: FilterOptions) => {
const processedFilters: ProcessedFilters = {}
filterOptions.forEach(filterOption => {
- const { filterKey, staticFilter } = filterOption
+ const { key, staticFilter } = filterOption
- processedFilters[(filterKey as unknown) as string] = {
+ processedFilters[(key as unknown) as string] = {
...filterOption,
- filterKey: (filterKey as unknown) as string,
+ key: (key 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({})
-
- const [dynamicOptions, setDynamicOptions] = useState<
- SelectOption[] | undefined
- >(undefined)
-
- const [dynamicSearchVal, setDynamicSearchVal] = useState('')
-
- const [filtersList, setFiltersList] = useState([
- { 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(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(resolve => {
- setTimeout(() => {
- cb()
- resolve()
- }, timeout)
- })
-
- await setAsyncTimeout(() => {
- setDynamicOptions(formatDynamicOptions(mockDynamicFilterOptions))
- setPending(false)
- }, 400)
- // -----------------
- }
-
- useEffect(() => {
- // const getFilters = async () => {
- // try {
- // const result = await api.get(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/JSONPathPicker/JSONPathPicker.stories.tsx b/src/components/JSONPathPicker/JSONPathPicker.stories.tsx
new file mode 100644
index 00000000..627928e1
--- /dev/null
+++ b/src/components/JSONPathPicker/JSONPathPicker.stories.tsx
@@ -0,0 +1,77 @@
+import { Input } from 'components/Input'
+import { JSONPathPicker, JSONPathPickerProps } from '.'
+import { Meta, Story } from '@storybook/react/types-6-0'
+import React, { useState } from 'react'
+
+export default {
+ component: JSONPathPicker,
+ title: 'JSONPathPicker'
+} as Meta
+
+const Template: Story = args => {
+ const [path, setPath] = useState('$.dassana')
+
+ return (
+
+
setPath(e.target.value)}
+ value={path}
+ />
+
+
{
+ setPath(path)
+ console.log(path)
+ }}
+ path={path}
+ />
+
+ path: string
+ onChange: (path: string) => void
+}
+
+export const JSONPathPicker: FC = ({
+ classes = [],
+ displayControls = true,
+ json,
+ path,
+ onChange
+}: JSONPathPickerProps) => {
+ const compClasses = useStyles()
+
+ const [isCopied, setIsCopied] = useState(false)
+
+ const copyJSON = () =>
+ copyToClipboard(stringifyCode(json), () => setIsCopied(true))
+
+ useEffect(() => {
+ if (isCopied) setTimeout(() => setIsCopied(false), 1250)
+ }, [isCopied])
+
+ return (
+
+ {displayControls && (
+
+ )}
+
+ {recursiveRender({
+ classes: compClasses,
+ currPath: '$',
+ isLastItem: true,
+ onChange,
+ pickedPath: path,
+ remainingJSON: json
+ })}
+
+
diff --git a/src/components/JSONPathPicker/utils.tsx b/src/components/JSONPathPicker/utils.tsx
new file mode 100644
index 00000000..f1031120
--- /dev/null
+++ b/src/components/JSONPathPicker/utils.tsx
@@ -0,0 +1,289 @@
+import { Classes } from './styles'
+import cn from 'classnames'
+import { getJSONPathArr } from 'components/utils'
+import isEmpty from 'lodash/isEmpty'
+import isNull from 'lodash/isNull'
+import { JSONValue } from '.'
+import React, { ReactNode } from 'react'
+
+enum Relationship {
+ other,
+ self,
+ ancestor
+}
+
+const { other, self, ancestor } = Relationship
+/**
+ * Gets the relationship between current path and the picked path
+ * @returns { Relationship } - Can either be "other", "self" or "ancestor"
+ */
+const getPathRelationship = (
+ currPath: string,
+ pickedPath: string
+): Relationship => {
+ if (!pickedPath) return other
+
+ const pickedAttrs = getJSONPathArr(pickedPath)
+ const pickedLen = pickedAttrs.length
+
+ const currAttrs = getJSONPathArr(currPath)
+ const currLen = currAttrs.length
+
+ if (currLen > pickedLen) return other
+
+ for (let i = 0; i < currLen; i++) {
+ const isInPath =
+ currAttrs[i] === pickedAttrs[i] || pickedAttrs[i] === '*'
+
+ if (!isInPath) return other
+ }
+
+ return currLen === pickedLen ? self : ancestor
+}
+
+/* -x-x-x-x- Helper functions to render JSON -x-x-x-x- */
+
+// ----------------------- Types -----------------------
+
+type RemainingJSON = JSONValue | Record
+
+interface RenderParams {
+ classes: Classes
+ pickedPath: string
+ isLastItem?: boolean
+ currPath: string
+ onChange: (pickedPath: string) => void
+ remainingJSON: RemainingJSON
+}
+
+enum Types {
+ array = 'array',
+ boolean = 'boolean',
+ null = 'null',
+ number = 'number',
+ object = 'object',
+ string = 'string'
+}
+
+const { array, boolean, null: nullType, number, object, string } = Types
+
+// -----------------------------------------------------
+
+const renderComma = ({
+ classes,
+ isLastItem
+}: Pick): ReactNode =>
+ isLastItem ? <> : renderPunctuation(',', classes)
+
+const renderPunctuation = (
+ punctuation: string,
+ classes: RenderParams['classes']
+): ReactNode => {punctuation}
+
+const renderArray = ({
+ classes,
+ isLastItem,
+ onChange,
+ pickedPath,
+ currPath,
+ remainingJSON
+}: RenderParams): ReactNode => {
+ const arr = remainingJSON as Record[]
+ const relation = getPathRelationship(currPath, pickedPath)
+
+ const pickedItemClasses = cn({
+ [classes.pickedItem]: relation === Relationship.self
+ })
+
+ return (
+ <>
+ {arr.length === 0 ? (
+
+ {renderPunctuation('[', classes)}
+ {renderPunctuation(']', classes)}
+ {renderComma({ classes, isLastItem })}
+
+ ) : (
+ <>
+ {renderPunctuation('[', classes)}
+
+ {arr.map((item, i) => (
+
+ {recursiveRender({
+ classes,
+ currPath: `${currPath}[${i}]`,
+ isLastItem: arr.length - 1 === i,
+ onChange,
+ pickedPath,
+ remainingJSON: item
+ })}
+
+ ))}
+
+
+ {renderPunctuation(']', classes)}
+ {renderComma({ classes, isLastItem })}
+
+
+ )}
+
+ )
+}
+
+const renderObject = ({
+ classes,
+ isLastItem,
+ onChange,
+ pickedPath,
+ remainingJSON,
+ currPath
+}: RenderParams): ReactNode => {
+ const json = remainingJSON as Record
+ const remainingKeys = Object.keys(json)
+
+ const relation = getPathRelationship(currPath, pickedPath)
+
+ const pickedItemClasses = cn({
+ [classes.pickedItem]: relation === Relationship.self
+ })
+
+ return isEmpty(json) ? (
+
+ {renderPunctuation('{', classes)}
+ {renderPunctuation('}', classes)}
+ {renderComma({ classes, isLastItem })}
+
+ ) : (
+ <>
+ {renderPunctuation('{', classes)}
+
+ {remainingKeys.map((key, i) => (
+
+ onChange(`${currPath}.${key}`)}
+ >{`"${key}"`}
+ :
+ {recursiveRender({
+ classes,
+ currPath: `${currPath}.${key}`,
+ isLastItem: remainingKeys.length - 1 === i,
+ onChange,
+ pickedPath,
+ remainingJSON: json[key]
+ })}
+
+ ))}
+
+
+ {renderPunctuation('}', classes)}
+ {renderComma({ classes, isLastItem })}
+
+
+ )
+}
+
+interface RenderPrimitiveParams extends RenderParams {
+ type: Types.boolean | Types.number | Types.null
+}
+const renderPrimitive = ({
+ classes,
+ pickedPath,
+ remainingJSON,
+ isLastItem,
+ currPath,
+ type
+}: RenderPrimitiveParams): ReactNode => {
+ const relation = getPathRelationship(currPath, pickedPath)
+
+ const pickedItemClasses = cn({
+ [classes[type]]: true,
+ [classes.pickedItem]: relation === Relationship.self
+ })
+
+ return (
+ <>
+
+ {JSON.stringify(remainingJSON)}
+
+ {renderComma({ classes, isLastItem })}
+
+ )
+}
+
+const renderString = ({
+ classes,
+ pickedPath,
+ remainingJSON,
+ isLastItem,
+ currPath
+}: RenderParams): ReactNode => {
+ const relation = getPathRelationship(currPath, pickedPath)
+
+ const pickedItemClasses = cn({
+ [classes.string]: true,
+ [classes.pickedItem]: relation === Relationship.self
+ })
+
+ return (
+ <>
+ {`"${remainingJSON}"`}
+ {renderComma({ classes, isLastItem })}
+
+ )
+}
+
+// -------------------------------------------------
+
+const mappedTypesToRenderFns = {
+ [array]: renderArray,
+ [boolean]: (params: RenderParams) =>
+ renderPrimitive({ ...params, type: boolean }),
+ [nullType]: (params: RenderParams) =>
+ renderPrimitive({ ...params, type: nullType }),
+ [number]: (params: RenderParams) =>
+ renderPrimitive({ ...params, type: number }),
+ [object]: renderObject,
+ [string]: renderString
+}
+
+const getRemainingJSONType = (remainingJSON: RemainingJSON) => {
+ if (isNull(remainingJSON)) return nullType
+ else if (Array.isArray(remainingJSON)) return array
+ else {
+ const type = typeof remainingJSON
+
+ switch (type) {
+ case 'number':
+ case 'bigint':
+ return number
+ case 'object':
+ return object
+ case 'string':
+ return string
+ case 'boolean':
+ return boolean
+ default:
+ return nullType
+ }
+ }
+}
+
+export const recursiveRender = ({
+ classes,
+ pickedPath,
+ isLastItem,
+ currPath,
+ onChange,
+ remainingJSON
+}: RenderParams): ReactNode =>
+ mappedTypesToRenderFns[getRemainingJSONType(remainingJSON)]({
+ classes,
+ currPath,
+ isLastItem,
+ onChange,
+ pickedPath,
+ remainingJSON
+ })
+
+/* -x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x- */
diff --git a/src/components/MultipleChoice/utils.ts b/src/components/MultipleChoice/utils.ts
index d54fba10..1c0fdf56 100644
--- a/src/components/MultipleChoice/utils.ts
+++ b/src/components/MultipleChoice/utils.ts
@@ -1,4 +1,5 @@
import { createUseStyles } from 'react-jss'
+import { filterMap } from 'components/utils'
import { MultipleChoiceItemConfig } from './types'
import { styleguide, ThemeType } from 'components/assets/styles'
@@ -14,30 +15,6 @@ const {
fontWeight
} = styleguide
-// -*-*-*-*-*- filterMap -*-*-*-*-*-
-// TODO: move this into web-utils
-
-interface FilterMapConfig {
- filterConditionFn: (item: T) => boolean
- items: T[]
- mapFn: (item: T) => U
-}
-
-export const filterMap = ({
- filterConditionFn,
- items,
- mapFn
-}: FilterMapConfig) =>
- items.reduce((filterAndMapped: U[], item: T) => {
- if (filterConditionFn(item)) {
- filterAndMapped.push(mapFn(item))
- }
-
- return filterAndMapped
- }, [])
-
-// -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
-
export interface MultipleSelectedValues {
[value: string]: boolean
}
diff --git a/src/components/Select/BaseSelect.tsx b/src/components/Select/BaseSelect.tsx
index e9e71884..ad55228d 100644
--- a/src/components/Select/BaseSelect.tsx
+++ b/src/components/Select/BaseSelect.tsx
@@ -146,28 +146,44 @@ export const BaseSelect: FC = (props: BaseSelectProps) => {
{...multiSelectProps}
{...singleSelectProps}
>
- {options.map(({ iconKey, text, style, value }) => (
-
- {props.mode === 'multiple' && (
- = 0}
- classes={[componentClasses.checkbox]}
- onChange={noop}
- />
- )}
-
- ))}
+ {/* if state is pending, options are being fetched outside the component, so don't render options. With no options, `notFoundContent` prop will render a spinning loader */}
+ {!('pending' in props && props.pending) &&
+ options.map(
+ ({
+ classes: optClasses = [],
+ iconKey,
+ text,
+ style,
+ value
+ }) => (
+
+ {props.mode === 'multiple' && (
+ =
+ 0
+ }
+ classes={[componentClasses.checkbox]}
+ onChange={noop}
+ />
+ )}
+
+ )
+ )}
)
diff --git a/src/components/Select/MultiSelect/MultiSelect.stories.tsx b/src/components/Select/MultiSelect/MultiSelect.stories.tsx
index cdb73056..d5891fef 100644
--- a/src/components/Select/MultiSelect/MultiSelect.stories.tsx
+++ b/src/components/Select/MultiSelect/MultiSelect.stories.tsx
@@ -60,6 +60,7 @@ Default.args = {
export const Search = Template.bind({})
Search.args = {
+ defaultValues: ['0'],
options: basicOptions,
searchPlaceholder: 'Search...',
showSearch: true
@@ -81,5 +82,11 @@ FullWidth.args = {
export const Icon = Template.bind({})
Icon.args = {
- options: iconOptions
+ options: iconOptions,
+ optionsConfig: {
+ iconMap: {
+ aws: 'https://dummyimage.com/400x400/ff9900/fff&text=A',
+ azure: 'https://dummyimage.com/400x400/0072c6/fff&text=A'
+ }
+ }
}
diff --git a/src/components/Select/MultiSelect/index.tsx b/src/components/Select/MultiSelect/index.tsx
index ceb77911..a74420f6 100644
--- a/src/components/Select/MultiSelect/index.tsx
+++ b/src/components/Select/MultiSelect/index.tsx
@@ -1,12 +1,8 @@
import { BaseSelect } from '../BaseSelect'
import Fuse from 'fuse.js'
+import { getSortedAndFilteredValues } from './utils'
import { Input } from '../../Input'
import { MultiSelectProps } from './types'
-import {
- getSortedAndFilteredValues,
- useDropdownStyles,
- useStyles
-} from './utils'
import React, {
ChangeEvent,
FC,
@@ -15,6 +11,7 @@ import React, {
useEffect,
useState
} from 'react'
+import { useDropdownStyles, useStyles } from './styles'
export const MultiSelect: FC
= (props: MultiSelectProps) => {
const {
@@ -84,9 +81,9 @@ export const MultiSelect: FC = (props: MultiSelectProps) => {
threshold: 0.1
})
- const onChangeAntD = (values?: string[]) => {
- const vals = values ? values : []
+ type OnChangeAntD = (vals?: string[]) => void
+ const onChangeAntD: OnChangeAntD = (vals = []) => {
if (onChange) onChange(vals)
setLocalValues(vals)
diff --git a/src/components/Select/MultiSelect/styles.ts b/src/components/Select/MultiSelect/styles.ts
new file mode 100644
index 00000000..f1d6257d
--- /dev/null
+++ b/src/components/Select/MultiSelect/styles.ts
@@ -0,0 +1,136 @@
+import { createUseStyles } from 'react-jss'
+import { tagPalette } from '../../Tag/utils'
+import {
+ defaultFieldWidth,
+ fieldErrorStyles,
+ styleguide
+} from '../../assets/styles/styleguide'
+import {
+ generateThemedDisabledStyles,
+ generateThemedDropdownStyles,
+ generateThemedFocusedStyles,
+ generateThemedInputStyles,
+ generateThemedOptionStyles,
+ generateThemedSelectStyles
+} from '../utils'
+import { themedStyles, ThemeType } from '../../assets/styles/themes'
+
+const { dark, light } = ThemeType
+
+const { borderRadius, flexAlignCenter, fontWeight, spacing } = styleguide
+
+const generateThemedTagStyles = (themeType: ThemeType) => {
+ const { background, borderColor, color } = tagPalette[themeType]
+
+ const { base, hover } = themedStyles[themeType]
+
+ return {
+ '& .ant-select-selection-item': {
+ '& .ant-select-selection-item-remove': {
+ '&:hover': {
+ color: hover.color
+ },
+ color: base.color
+ },
+ background,
+ borderColor,
+ color,
+ fontWeight: fontWeight.light
+ }
+ }
+}
+
+export const generateThemedMSOptionStyles = (themeType: ThemeType) => {
+ const optionClasses = '&.ant-select-item-option'
+
+ const optionStyles = generateThemedOptionStyles(themeType)[optionClasses]
+
+ return {
+ [optionClasses]: {
+ '& .ant-select-item-option-content': { ...flexAlignCenter },
+ '&.ant-select-item-option-active':
+ optionStyles['&.ant-select-item-option-active'],
+ '&.ant-select-item-option-selected': {
+ ...optionStyles['&.ant-select-item-option-selected'],
+ background: 'transparent'
+ },
+ color: optionStyles.color,
+ fontWeight: optionStyles.fontWeight
+ }
+ }
+}
+
+const focusedClasses =
+ '&.ant-select-focused.ant-select-multiple:not(.ant-select-disabled) .ant-select-selector'
+
+export const useDropdownStyles = createUseStyles({
+ searchBar: {
+ margin: 3 * spacing.xs,
+ width: `calc(100% - ${6 * spacing.xs}px)`
+ }
+})
+
+const generateErrorStyles = (themeType: ThemeType) => ({
+ '&$error': {
+ '&:hover > div.ant-select-selector, & > .ant-select-selector': {
+ border: `1px solid ${themedStyles[themeType].error.borderColor}`
+ }
+ }
+})
+
+export const useStyles = createUseStyles({
+ checkbox: { marginRight: spacing.s },
+ container: ({ fullWidth, matchSelectedContentWidth }) => ({
+ '& .ant-select': {
+ '&.ant-select-multiple': {
+ ...generateErrorStyles(light),
+ '&.ant-select-disabled': generateThemedDisabledStyles(light),
+ ...generateThemedSelectStyles(light),
+ ...generateThemedTagStyles(light),
+ '& .ant-select-selector': {
+ '& .ant-select-selection-overflow': {
+ display: 'flex',
+ flexWrap: matchSelectedContentWidth ? 'nowrap' : 'wrap'
+ },
+ '&:after': { width: 0 },
+ ...generateThemedInputStyles(light),
+ borderRadius
+ },
+ [focusedClasses]: generateThemedFocusedStyles(light)
+ },
+ minWidth: matchSelectedContentWidth
+ ? matchSelectedContentWidth
+ : 'unset',
+ width: matchSelectedContentWidth ? 'unset' : '100%'
+ },
+ width:
+ fullWidth || matchSelectedContentWidth ? '100%' : defaultFieldWidth
+ }),
+ dropdown: generateThemedDropdownStyles(light),
+ error: { ...fieldErrorStyles.error },
+ option: generateThemedMSOptionStyles(light),
+ // eslint-disable-next-line sort-keys
+ '@global': {
+ ...fieldErrorStyles['@global'],
+ [`.${dark}`]: {
+ '& $container': {
+ '& .ant-select': {
+ '&.ant-select-multiple': {
+ ...generateErrorStyles(dark),
+ '&.ant-select-disabled': generateThemedDisabledStyles(
+ dark
+ ),
+ ...generateThemedSelectStyles(dark),
+ ...generateThemedTagStyles(dark),
+ '& .ant-select-selector': {
+ ...generateThemedInputStyles(dark)
+ },
+ [focusedClasses]: generateThemedFocusedStyles(dark)
+ }
+ }
+ },
+ '& $dropdown': generateThemedDropdownStyles(dark),
+ '& $option': generateThemedMSOptionStyles(dark)
+ }
+ }
+})
diff --git a/src/components/Select/MultiSelect/types.ts b/src/components/Select/MultiSelect/types.ts
index ffd0f42d..3e091af2 100644
--- a/src/components/Select/MultiSelect/types.ts
+++ b/src/components/Select/MultiSelect/types.ts
@@ -13,9 +13,6 @@ export interface MultiSelectProps
*/
maxTagCount?: number
maxTagTextLength?: number
- /**
- * Array of options to be rendered in the dropdown
- */
onChange?: (values: string[]) => void
onFocus?: () => void
onSearch?: (value: string) => void
@@ -27,7 +24,7 @@ export interface MultiSelectProps
pending?: boolean
searchPlaceholder?: string
/**
- * Selected values for if component is controlled. Requires an onChange to be passed
+ * Selected values if component is controlled. Requires an onChange to be passed
*/
values?: string[]
}
diff --git a/src/components/Select/MultiSelect/utils.ts b/src/components/Select/MultiSelect/utils.ts
index 726d6d28..b7281712 100644
--- a/src/components/Select/MultiSelect/utils.ts
+++ b/src/components/Select/MultiSelect/utils.ts
@@ -1,27 +1,7 @@
-import { createUseStyles } from 'react-jss'
import Fuse from 'fuse.js'
import { MultiSelectProps } from './types'
import { SelectOption } from '../SingleSelect/types'
import sortBy from 'lodash/sortBy'
-import { tagPalette } from '../../Tag/utils'
-import {
- defaultFieldWidth,
- fieldErrorStyles,
- styleguide
-} from '../../assets/styles/styleguide'
-import {
- generateThemedDisabledStyles,
- generateThemedDropdownStyles,
- generateThemedFocusedStyles,
- generateThemedInputStyles,
- generateThemedOptionStyles,
- generateThemedSelectStyles
-} from '../utils'
-import { themedStyles, ThemeType } from '../../assets/styles/themes'
-
-const { dark, light } = ThemeType
-
-const { borderRadius, flexAlignCenter, fontWeight, spacing } = styleguide
const filterOptions = (
fuse: Fuse,
@@ -39,121 +19,7 @@ const filterOptions = (
return filteredOptions
}
-const generateThemedTagStyles = (themeType: ThemeType) => {
- const { background, borderColor, color } = tagPalette[themeType]
-
- const { base, hover } = themedStyles[themeType]
-
- return {
- '& .ant-select-selection-item': {
- '& .ant-select-selection-item-remove': {
- '&:hover': {
- color: hover.color
- },
- color: base.color
- },
- background,
- borderColor,
- color,
- fontWeight: fontWeight.light
- }
- }
-}
-
-export const generateThemedMSOptionStyles = (themeType: ThemeType) => {
- const optionClasses = '&.ant-select-item-option'
-
- const optionStyles = generateThemedOptionStyles(themeType)[optionClasses]
-
- return {
- [optionClasses]: {
- '& .ant-select-item-option-content': { ...flexAlignCenter },
- '&.ant-select-item-option-active':
- optionStyles['&.ant-select-item-option-active'],
- '&.ant-select-item-option-selected': {
- ...optionStyles['&.ant-select-item-option-selected'],
- background: 'transparent'
- },
- color: optionStyles.color,
- fontWeight: optionStyles.fontWeight
- }
- }
-}
-
-const focusedClasses =
- '&.ant-select-focused.ant-select-multiple:not(.ant-select-disabled) .ant-select-selector'
-
-export const useDropdownStyles = createUseStyles({
- searchBar: {
- margin: 3 * spacing.xs,
- width: `calc(100% - ${6 * spacing.xs}px)`
- }
-})
-
-const generateErrorStyles = (themeType: ThemeType) => ({
- '&$error': {
- '&:hover > div.ant-select-selector, & > .ant-select-selector': {
- border: `1px solid ${themedStyles[themeType].error.borderColor}`
- }
- }
-})
-
-export const useStyles = createUseStyles({
- checkbox: { marginRight: spacing.s },
- container: ({ fullWidth, matchSelectedContentWidth }) => ({
- '& .ant-select': {
- '&.ant-select-multiple': {
- ...generateErrorStyles(light),
- '&.ant-select-disabled': generateThemedDisabledStyles(light),
- ...generateThemedSelectStyles(light),
- ...generateThemedTagStyles(light),
- '& .ant-select-selector': {
- '& .ant-select-selection-overflow': {
- display: 'flex',
- flexWrap: matchSelectedContentWidth ? 'nowrap' : 'wrap'
- },
- '&:after': { width: 0 },
- ...generateThemedInputStyles(light),
- borderRadius
- },
- [focusedClasses]: generateThemedFocusedStyles(light)
- },
- minWidth: matchSelectedContentWidth
- ? matchSelectedContentWidth
- : 'unset',
- width: matchSelectedContentWidth ? 'unset' : '100%'
- },
- width:
- fullWidth || matchSelectedContentWidth ? '100%' : defaultFieldWidth
- }),
- dropdown: generateThemedDropdownStyles(light),
- error: { ...fieldErrorStyles.error },
- option: generateThemedMSOptionStyles(light),
- // eslint-disable-next-line sort-keys
- '@global': {
- ...fieldErrorStyles['@global'],
- [`.${dark}`]: {
- '& $container': {
- '& .ant-select': {
- '&.ant-select-multiple': {
- ...generateErrorStyles(dark),
- '&.ant-select-disabled': generateThemedDisabledStyles(
- dark
- ),
- ...generateThemedSelectStyles(dark),
- ...generateThemedTagStyles(dark),
- '& .ant-select-selector': {
- ...generateThemedInputStyles(dark)
- },
- [focusedClasses]: generateThemedFocusedStyles(dark)
- }
- }
- },
- '& $dropdown': generateThemedDropdownStyles(dark),
- '& $option': generateThemedMSOptionStyles(dark)
- }
- }
-})
+// ----------------------------------------
export const groupOptions = (
ungroupedOpts: SelectOption[],
diff --git a/src/components/Select/OptionChildren.tsx b/src/components/Select/OptionChildren.tsx
index 4b3158be..209bbafc 100644
--- a/src/components/Select/OptionChildren.tsx
+++ b/src/components/Select/OptionChildren.tsx
@@ -2,7 +2,7 @@ import { createUseStyles } from 'react-jss'
import { styleguide } from '../assets/styles/styleguide'
import { Tooltip } from '../Tooltip'
import { tooltipStyles } from './utils'
-import { Icon, IconName, SharedIconProps } from '../Icon'
+import { Icon, IconName, IconProps, SharedIconProps } from '../Icon'
import React, { FC, ReactNode, SyntheticEvent, useState } from 'react'
import {
SelectOption,
@@ -43,7 +43,7 @@ export const OptionChildren: FC = ({
const { style = {} } = optionsConfig
const renderIcon = (
- iconKey: IconName,
+ iconKey: IconName | string,
optionsConfig: SelectOptionsConfig
): JSX.Element => {
const commonIconProps: SharedIconProps = {
@@ -52,15 +52,21 @@ export const OptionChildren: FC = ({
const { iconMap } = optionsConfig
- return (
+ const renderIconWithProps = (props: IconProps) => (
- {iconMap ? (
-
)
+
+ return iconMap ? (
+ iconMap[iconKey] ? (
+ renderIconWithProps({ icon: iconMap[iconKey] })
+ ) : (
+ <>
+ )
+ ) : (
+ renderIconWithProps({ iconKey: iconKey as IconName })
+ )
}
return (
@@ -72,11 +78,7 @@ export const OptionChildren: FC = ({
onMouseEnter={(e: SyntheticEvent) => {
const el = e.currentTarget as HTMLElement
- if (el.scrollWidth > el.offsetWidth) {
- setHasTooltip(true)
- } else {
- setHasTooltip(false)
- }
+ setHasTooltip(el.scrollWidth > el.offsetWidth)
}}
>
{hasTooltip ? (
diff --git a/src/components/Select/SingleSelect/types.ts b/src/components/Select/SingleSelect/types.ts
index a2019f59..b0fc7339 100644
--- a/src/components/Select/SingleSelect/types.ts
+++ b/src/components/Select/SingleSelect/types.ts
@@ -4,7 +4,8 @@ import { IconName } from '../../Icon'
import { SizeType } from 'antd/lib/config-provider/SizeContext'
export interface SelectOption {
- iconKey?: IconName
+ classes?: string[]
+ iconKey?: IconName | string
style?: CSSProperties
text: string
value: string
diff --git a/src/components/Table/utils.tsx b/src/components/Table/utils.tsx
index 95953724..16b808ae 100644
--- a/src/components/Table/utils.tsx
+++ b/src/components/Table/utils.tsx
@@ -3,9 +3,7 @@ import bytes from 'bytes'
import { CellWithTooltip } from './CellWithTooltip'
import { ColoredDot } from 'components/ColoredDot'
import { EditableCell } from './EditableCell'
-import { getJSONPathValue } from 'components/utils'
import isUndefined from 'lodash/isUndefined'
-import { JSONPath } from 'jsonpath-plus'
import moment from 'moment'
import {
ColumnFormats,
@@ -20,6 +18,7 @@ import {
RenderPropsIcon
} from './types'
import { defaultIconHeight, MultipleIcons } from './MultipleIcons'
+import { getJSONPathArr, getJSONPathValue } from 'components/utils'
import { Icon, IconName, IconProps } from '../Icon'
import { Link, LinkProps } from '../Link'
import React, { Key, MouseEvent } from 'react'
@@ -106,10 +105,11 @@ export function processData(
partialData[dataIndex as keyof TableData] = value
}
- //@ts-ignore
- const pathArr: string[] = JSONPath.toPathArray(`$.${dataIndex}`)
+ const pathArr: string[] = getJSONPathArr(`$.${dataIndex}`)
+ // Fix for this issue https://github.com/JSONPath-Plus/JSONPath/issues/102
+ if (pathArr[0] === '$') pathArr.shift()
- if (pathArr && pathArr.length) {
+ if (pathArr.length) {
partialData[pathArr[0] as keyof TableData] = item[pathArr[0]]
}
})
diff --git a/src/components/Tabs/TabPane.tsx b/src/components/Tabs/TabPane.tsx
new file mode 100644
index 00000000..ad9f544d
--- /dev/null
+++ b/src/components/Tabs/TabPane.tsx
@@ -0,0 +1,45 @@
+import cn from 'classnames'
+import { createUseStyles } from 'react-jss'
+import { motion } from 'framer-motion'
+import { styleguide } from 'components/assets/styles'
+import { TabConfig } from '.'
+import React, { FC } from 'react'
+
+const { font, spacing } = styleguide
+
+const useStyles = createUseStyles({
+ tabPane: {
+ ...font.body,
+ display: ({ isActive }) => (isActive ? 'block' : 'none'),
+ padding: `${spacing.m}px ${spacing.l}px`
+ }
+})
+
+interface TabPaneProps {
+ isActive: boolean
+ tabConfigItem: TabConfig
+}
+
+const [ACTIVE, INACTIVE] = ['active', 'inactive']
+
+const TabPane: FC = ({
+ isActive,
+ tabConfigItem: { classes = [], render }
+}: TabPaneProps) => {
+ const compClasses = useStyles({ isActive })
+
+ return (
+
+ {render()}
+
+ )
+}
+
+export default TabPane
diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
index c6e6deff..1c460236 100644
--- a/src/components/Tabs/Tabs.stories.tsx
+++ b/src/components/Tabs/Tabs.stories.tsx
@@ -28,6 +28,9 @@ export default {
tabConfig: { control: { disable: true } }
},
component: Tabs,
+ parameters: {
+ storyshots: { disable: true }
+ },
title: 'Tabs'
} as Meta
diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx
index cecc0506..199c3693 100644
--- a/src/components/Tabs/index.tsx
+++ b/src/components/Tabs/index.tsx
@@ -2,6 +2,7 @@ import cn from 'classnames'
import { createUseStyles } from 'react-jss'
import { generateThemedTabsListStyles } from './utils'
import Tab from './Tab'
+import TabPane from './TabPane'
import React, { FC, ReactNode, useState } from 'react'
import { styleguide, ThemeType } from 'components/assets/styles'
@@ -58,29 +59,13 @@ export const Tabs: FC = ({
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 = () =>
@@ -94,6 +79,15 @@ export const Tabs: FC = ({
/>
))
+ const renderTabPanes = () =>
+ tabConfig.map((tabConfigItem, i) => (
+ = ({
return (
{renderTabItems()}
-
- {!tabSwitching && tabConfig[activeIndex].render()}
-
+ {renderTabPanes()}
)
}
diff --git a/src/components/Timeline/Separator.tsx b/src/components/Timeline/Separator.tsx
index 25fca115..5b65dbc7 100644
--- a/src/components/Timeline/Separator.tsx
+++ b/src/components/Timeline/Separator.tsx
@@ -13,7 +13,7 @@ import { styleguide, ThemeType } from '../assets/styles'
const { alwaysExpanded, collapsed, expanded } = TimelineState
const { dark, light } = ThemeType
-const { flexDown, font } = styleguide
+const { flexDown, font, spacing } = styleguide
const useStyles = createUseStyles({
chevron: {
@@ -39,7 +39,8 @@ const useStyles = createUseStyles({
},
separator: {
...flexDown,
- alignItems: 'center'
+ alignItems: 'center',
+ paddingRight: spacing['m+']
},
// eslint-disable-next-line sort-keys
'@global': {
diff --git a/src/components/Timeline/index.tsx b/src/components/Timeline/index.tsx
index 8cb68999..5702601f 100644
--- a/src/components/Timeline/index.tsx
+++ b/src/components/Timeline/index.tsx
@@ -25,8 +25,7 @@ const useStyles = createUseStyles({
...generateThemedTimelineItemStyles(light),
borderRadius,
flexGrow: 1,
- height: '100%',
- marginLeft: spacing['m+']
+ height: '100%'
},
wrapper: {
...generateThemedWrapperStyles(light),
diff --git a/src/components/api/index.ts b/src/components/api/index.ts
new file mode 100644
index 00000000..a7feb3bb
--- /dev/null
+++ b/src/components/api/index.ts
@@ -0,0 +1,33 @@
+// TODO: Setup and integrate swaggerhub so types are generated
+export type FilterKey = string
+
+export type FilterOperator = string
+export type FilterOperators = FilterOperator[]
+
+export interface FilterValue {
+ id: string
+ value: string
+}
+export type FilterValues = FilterValue[]
+
+export interface Filter {
+ key: FilterKey
+ operator?: FilterOperator
+ value: string[]
+}
+export type Filters = Filter[]
+
+export interface FilterOption {
+ key: FilterKey
+ staticFilter?: boolean
+ operator?: FilterOperators
+ values?: FilterValues
+}
+export type FilterOptions = FilterOption[]
+
+export interface FilterSuggestions {
+ key: FilterKey
+ operator: FilterOperators
+ search?: string
+ filters?: Filters
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 9ff98b54..dcb2e654 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -14,6 +14,7 @@ export * from './Form'
export * from './Input'
export * from './Icon'
export * from './IconButton'
+export * from './JSONPathPicker'
export * from './Link'
export * from './Modal'
export * from './Menu'
diff --git a/src/components/utils.ts b/src/components/utils.ts
index 982712c8..ddbb0492 100644
--- a/src/components/utils.ts
+++ b/src/components/utils.ts
@@ -89,6 +89,30 @@ export const fakeApiCallSuccess: () => Promise = async (
timeoutDuration = 1000
) => await new Promise(resolve => setTimeout(resolve, timeoutDuration))
+// -*-*-*-*-*- filterMap -*-*-*-*-*-
+// TODO: move this into web-utils
+
+interface FilterMapConfig {
+ filterConditionFn: (item: T) => boolean
+ items: T[]
+ mapFn: (item: T) => U
+}
+
+export const filterMap = ({
+ filterConditionFn,
+ items,
+ mapFn
+}: FilterMapConfig) =>
+ items.reduce((filterAndMapped: U[], item: T) => {
+ if (filterConditionFn(item)) {
+ filterAndMapped.push(mapFn(item))
+ }
+
+ return filterAndMapped
+ }, [])
+
+// -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
+
export const generatePopupSelector = (
popupContainerSelector: string
) => (): HTMLElement =>
@@ -110,6 +134,12 @@ export const getJSONPathValue = (path: string, obj: Record) => {
if (value && Array.isArray(value)) return value[0]
}
+/**
+ * Takes a JSON path as string and converts to an array
+ */
+export const getJSONPathArr = (path: string): string[] =>
+ JSONPath.toPathArray(path)
+
export const getPopupContainerProps = (
popupContainerSelector = ''
): PopupContainerProps => {