Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update link to docs for searches, run prettier

Browse Source
This commit is contained in:
Jackson Harper
2023-09-08 12:22:34 +08:00
parent 7468a15022
commit 63585a9a36
1 changed files with 227 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

360
packages/web/pages/settings/saved-searches.tsx
View File

@ -1,4 +1,11 @@
import { Dispatch, MouseEventHandler, SetStateAction, useCallback, useEffect, useState } from "react" import {
Dispatch,
MouseEventHandler,
SetStateAction,
useCallback,
useEffect,
useState,
} from 'react'
import { SettingsLayout } from '../../components/templates/SettingsLayout' import { SettingsLayout } from '../../components/templates/SettingsLayout'
import { Button } from '../../components/elements/Button' import { Button } from '../../components/elements/Button'
import { styled, theme } from '../../components/tokens/stitches.config' import { styled, theme } from '../../components/tokens/stitches.config'
@ -25,13 +32,13 @@ import {
} from '../../components/elements/DropdownElements' } from '../../components/elements/DropdownElements'
import { ConfirmationModal } from '../../components/patterns/ConfirmationModal' import { ConfirmationModal } from '../../components/patterns/ConfirmationModal'
import { InfoLink } from '../../components/elements/InfoLink' import { InfoLink } from '../../components/elements/InfoLink'
import { useGetSavedSearchQuery } from "../../lib/networking/queries/useGetSavedSearchQuery" import { useGetSavedSearchQuery } from '../../lib/networking/queries/useGetSavedSearchQuery'
import { SavedSearch } from "../../lib/networking/fragments/savedSearchFragment" import { SavedSearch } from '../../lib/networking/fragments/savedSearchFragment'
import CheckboxComponent from "../../components/elements/Checkbox" import CheckboxComponent from '../../components/elements/Checkbox'
import { updateFilterMutation } from "../../lib/networking/mutations/updateFilterMutation" import { updateFilterMutation } from '../../lib/networking/mutations/updateFilterMutation'
import { saveFilterMutation } from "../../lib/networking/mutations/saveFilterMutation" import { saveFilterMutation } from '../../lib/networking/mutations/saveFilterMutation'
import { inRange } from 'lodash'; import { inRange } from 'lodash'
import { deleteFilterMutation } from "../../lib/networking/mutations/deleteFilterMutation" import { deleteFilterMutation } from '../../lib/networking/mutations/deleteFilterMutation'
const HeaderWrapper = styled(Box, { const HeaderWrapper = styled(Box, {
width: '100%', width: '100%',
@ -146,22 +153,24 @@ export default function SavedSearchesPage(): JSX.Element {
const { savedSearches, isLoading } = useGetSavedSearchQuery() const { savedSearches, isLoading } = useGetSavedSearchQuery()
const [nameInputText, setNameInputText] = useState<string>('') const [nameInputText, setNameInputText] = useState<string>('')
const [queryInputText, setQueryInputText] = useState<string>('') const [queryInputText, setQueryInputText] = useState<string>('')
const [editingId, setEditingId] = useState<string|null>(null); const [editingId, setEditingId] = useState<string | null>(null)
const [isCreateMode, setIsCreateMode] = useState<boolean>(false) const [isCreateMode, setIsCreateMode] = useState<boolean>(false)
const [windowWidth, setWindowWidth] = useState<number>(0) const [windowWidth, setWindowWidth] = useState<number>(0)
const [confirmRemoveSavedSearchId, setConfirmRemoveSavedSearchId] = useState< const [confirmRemoveSavedSearchId, setConfirmRemoveSavedSearchId] =
string | null useState<string | null>(null)
>(null) const [draggedElementId, setDraggedElementId] = useState<string | null>(null)
const [draggedElementId, setDraggedElementId] = useState<string | null>(null); const [draggedElementPosition, setDraggedElementPosition] =
const [draggedElementPosition, setDraggedElementPosition] = useState<{ x: number, y: number } | null>(null); useState<{ x: number; y: number } | null>(null)
const [sortedSavedSearch, setSortedSavedSearch] = useState<SavedSearch[]>([]); const [sortedSavedSearch, setSortedSavedSearch] = useState<SavedSearch[]>([])
// Some theming stuff here. // Some theming stuff here.
const breakpoint = 768 const breakpoint = 768
applyStoredTheme(false) applyStoredTheme(false)
useEffect(() => { useEffect(() => {
setSortedSavedSearch([...(savedSearches ?? [])].sort((l, r) => l.position - r.position)) setSortedSavedSearch(
[...(savedSearches ?? [])].sort((l, r) => l.position - r.position)
)
}, [isLoading]) }, [isLoading])
useEffect(() => { useEffect(() => {
@ -184,7 +193,12 @@ export default function SavedSearchesPage(): JSX.Element {
async function createSavedSearch(): Promise<void> { async function createSavedSearch(): Promise<void> {
try { try {
const savedFilter = await saveFilterMutation({ name: nameInputText, filter: queryInputText, category: 'Search', position: sortedSavedSearch?.length ?? 0 }); const savedFilter = await saveFilterMutation({
name: nameInputText,
filter: queryInputText,
category: 'Search',
position: sortedSavedSearch?.length ?? 0,
})
showSuccessToast(`Added Filter: ${nameInputText}`) showSuccessToast(`Added Filter: ${nameInputText}`)
if (savedFilter) { if (savedFilter) {
@ -199,12 +213,16 @@ export default function SavedSearchesPage(): JSX.Element {
async function updateSavedSearch(id: string): Promise<void> { async function updateSavedSearch(id: string): Promise<void> {
resetSavedSearchState() resetSavedSearchState()
const changedSortedSearch = sortedSavedSearch?.find(it => it.id == id) const changedSortedSearch = sortedSavedSearch?.find((it) => it.id == id)
if (changedSortedSearch != undefined) { if (changedSortedSearch != undefined) {
changedSortedSearch.name = nameInputText changedSortedSearch.name = nameInputText
changedSortedSearch.filter = queryInputText changedSortedSearch.filter = queryInputText
setSortedSavedSearch(sortedSavedSearch) setSortedSavedSearch(sortedSavedSearch)
await updateFilterMutation( { id, name: nameInputText, filter: queryInputText }); await updateFilterMutation({
id,
name: nameInputText,
filter: queryInputText,
})
} }
} }
@ -219,15 +237,21 @@ export default function SavedSearchesPage(): JSX.Element {
} }
async function onDeleteSavedSearch(id: string): Promise<void> { async function onDeleteSavedSearch(id: string): Promise<void> {
const currentElement = sortedSavedSearch?.find((it) => it.id == id); const currentElement = sortedSavedSearch?.find((it) => it.id == id)
if (currentElement) { if (currentElement) {
await deleteFilterMutation(id) await deleteFilterMutation(id)
setSortedSavedSearch( setSortedSavedSearch(
sortedSavedSearch sortedSavedSearch
.filter(it => it.id !== id) .filter((it) => it.id !== id)
.map(it => { .map((it) => {
return { ...it, position: currentElement.position > it.position ? it.position : it.position - 1 } return {
...it,
position:
currentElement.position > it.position
? it.position
: it.position - 1,
}
}) })
) )
} }
@ -239,18 +263,34 @@ export default function SavedSearchesPage(): JSX.Element {
setConfirmRemoveSavedSearchId(id) setConfirmRemoveSavedSearchId(id)
} }
async function updatePositionOnMouseUp(y: number): Promise<string | undefined> { async function updatePositionOnMouseUp(
const currentElement = sortedSavedSearch?.find(({ id }) => id == draggedElementId); y: number
): Promise<string | undefined> {
const currentElement = sortedSavedSearch?.find(
({ id }) => id == draggedElementId
)
if (currentElement) { if (currentElement) {
const idx = Math.floor(((y + window.scrollY - 25) - TOP_SETTINGS_PANEL) / HEIGHT_SETTING_CARD) const idx = Math.floor(
const correctedIdx = Math.min(Math.max(idx, 0), sortedSavedSearch?.length - 1) (y + window.scrollY - 25 - TOP_SETTINGS_PANEL) / HEIGHT_SETTING_CARD
)
const correctedIdx = Math.min(
Math.max(idx, 0),
sortedSavedSearch?.length - 1
)
const moveUp = correctedIdx < currentElement.position const moveUp = correctedIdx < currentElement.position
if (correctedIdx != currentElement.position) { if (correctedIdx != currentElement.position) {
const newlyOrdered = sortedSavedSearch const newlyOrdered = sortedSavedSearch
?.map((search) => { ?.map((search) => {
let pos = search.position; let pos = search.position
if (inRange(pos, Math.min(correctedIdx, currentElement.position), Math.max(correctedIdx, currentElement.position)) || search.position == correctedIdx) { if (
inRange(
pos,
Math.min(correctedIdx, currentElement.position),
Math.max(correctedIdx, currentElement.position)
) ||
search.position == correctedIdx
) {
pos = search.position + (moveUp ? +1 : -1) pos = search.position + (moveUp ? +1 : -1)
} }
if (draggedElementId == search?.id) { if (draggedElementId == search?.id) {
@ -258,12 +298,15 @@ export default function SavedSearchesPage(): JSX.Element {
} }
return { return {
...search, ...search,
position: pos position: pos,
} }
}) })
?.sort((l, r) => l.position - r.position); ?.sort((l, r) => l.position - r.position)
setSortedSavedSearch(newlyOrdered) setSortedSavedSearch(newlyOrdered)
return updateFilterMutation({ ...currentElement, position: correctedIdx }) return updateFilterMutation({
...currentElement,
position: correctedIdx,
})
} }
} }
@ -288,9 +331,7 @@ export default function SavedSearchesPage(): JSX.Element {
> >
{confirmRemoveSavedSearchId ? ( {confirmRemoveSavedSearchId ? (
<ConfirmationModal <ConfirmationModal
message={ message={'Are you sure?'}
'Are you sure?'
}
onAccept={async () => { onAccept={async () => {
await onDeleteSavedSearch(confirmRemoveSavedSearchId) await onDeleteSavedSearch(confirmRemoveSavedSearchId)
setConfirmRemoveSavedSearchId(null) setConfirmRemoveSavedSearchId(null)
@ -308,7 +349,7 @@ export default function SavedSearchesPage(): JSX.Element {
<Box> <Box>
<StyledText style="fixedHeadline">Saved Searches </StyledText> <StyledText style="fixedHeadline">Saved Searches </StyledText>
</Box> </Box>
<InfoLink href="/help/search" /> <InfoLink href="https://docs.omnivore.app/using/search.html" />
<Box <Box
css={{ css={{
display: 'flex', display: 'flex',
@ -404,48 +445,60 @@ export default function SavedSearchesPage(): JSX.Element {
</> </>
{sortedSavedSearch {sortedSavedSearch
? sortedSavedSearch.map((savedSearch, i) => { ? sortedSavedSearch.map((savedSearch, i) => {
const isLastChild = i === sortedSavedSearch.length - 1 const isLastChild = i === sortedSavedSearch.length - 1
const isFirstChild = i === 0 const isFirstChild = i === 0
const positionY = TOP_SETTINGS_PANEL + (HEIGHT_SETTING_CARD * (i + 1)); const positionY =
const cardProps = { TOP_SETTINGS_PANEL + HEIGHT_SETTING_CARD * (i + 1)
savedSearch, const cardProps = {
editingId, savedSearch,
isCreateMode: isCreateMode, editingId,
isLastChild: isLastChild, isCreateMode: isCreateMode,
isFirstChild: isFirstChild, isLastChild: isLastChild,
setEditingId, isFirstChild: isFirstChild,
nameInputText: nameInputText, setEditingId,
queryInputText: queryInputText, nameInputText: nameInputText,
setNameInputText: setNameInputText, queryInputText: queryInputText,
setQueryInputText: setQueryInputText, setNameInputText: setNameInputText,
setIsCreateMode: setIsCreateMode, setQueryInputText: setQueryInputText,
resetState: resetSavedSearchState, setIsCreateMode: setIsCreateMode,
updateSavedSearch, resetState: resetSavedSearchState,
deleteSavedSearch, updateSavedSearch,
createSavedSearch, deleteSavedSearch,
draggedElementId, createSavedSearch,
setDraggedElementId, draggedElementId,
onEditPress, setDraggedElementId,
setDraggedElementPosition, onEditPress,
isSwappedCard: (draggedElementPosition && draggedElementId != savedSearch.id && (draggedElementPosition.y + window.scrollY + HEIGHT_SETTING_CARD)> positionY && draggedElementPosition?.y + window.scrollY + HEIGHT_SETTING_CARD < positionY + HEIGHT_SETTING_CARD) || undefined, setDraggedElementPosition,
updatePositionOnMouseUp isSwappedCard:
} (draggedElementPosition &&
if (editingId == savedSearch.id) { draggedElementId != savedSearch.id &&
if (windowWidth >= breakpoint) { draggedElementPosition.y +
return <DesktopEditCard {...cardProps} /> window.scrollY +
} else { HEIGHT_SETTING_CARD >
return <MobileEditCard {...cardProps} /> positionY &&
draggedElementPosition?.y +
window.scrollY +
HEIGHT_SETTING_CARD <
positionY + HEIGHT_SETTING_CARD) ||
undefined,
updatePositionOnMouseUp,
}
if (editingId == savedSearch.id) {
if (windowWidth >= breakpoint) {
return <DesktopEditCard {...cardProps} />
} else {
return <MobileEditCard {...cardProps} />
}
} }
}
return ( return (
<GenericTableCard <GenericTableCard
key={savedSearch.id} key={savedSearch.id}
{...cardProps} {...cardProps}
onEditPress={onEditPress} onEditPress={onEditPress}
/> />
) )
}) })
: null} : null}
</VStack> </VStack>
</HStack> </HStack>
@ -462,7 +515,7 @@ type EditCardProps = {
setQueryInputText: Dispatch<SetStateAction<string>> setQueryInputText: Dispatch<SetStateAction<string>>
isCreateMode: boolean isCreateMode: boolean
setIsCreateMode: Dispatch<SetStateAction<boolean>> setIsCreateMode: Dispatch<SetStateAction<boolean>>
setEditingId: Dispatch<SetStateAction<string | null>> setEditingId: Dispatch<SetStateAction<string | null>>
setNameInputText: Dispatch<SetStateAction<string>> setNameInputText: Dispatch<SetStateAction<string>>
createSavedSearch: () => Promise<void> createSavedSearch: () => Promise<void>
updateSavedSearch: (id: string) => Promise<void> updateSavedSearch: (id: string) => Promise<void>
@ -473,8 +526,10 @@ type EditCardProps = {
isLastChild?: boolean | undefined isLastChild?: boolean | undefined
draggedElementId: string | null draggedElementId: string | null
setDraggedElementId: Dispatch<SetStateAction<string | null>> setDraggedElementId: Dispatch<SetStateAction<string | null>>
setDraggedElementPosition: Dispatch<SetStateAction<{ x: number, y: number } | null>> setDraggedElementPosition: Dispatch<
isSwappedCard?: boolean, SetStateAction<{ x: number; y: number } | null>
>
isSwappedCard?: boolean
updatePositionOnMouseUp?: (y: number) => Promise<string | undefined> updatePositionOnMouseUp?: (y: number) => Promise<string | undefined>
} }
@ -504,13 +559,22 @@ function GenericTableCard(
setDraggedElementId, setDraggedElementId,
setDraggedElementPosition, setDraggedElementPosition,
isSwappedCard, isSwappedCard,
updatePositionOnMouseUp updatePositionOnMouseUp,
} = props } = props
const [isVisible, setIsVisible] = useState(!!savedSearch?.visible) const [isVisible, setIsVisible] = useState(!!savedSearch?.visible)
const showInput = editingId === savedSearch?.id || (isCreateMode && !savedSearch) const showInput =
editingId === savedSearch?.id || (isCreateMode && !savedSearch)
const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58' const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
const DEFAULT_STYLE = { position: null }; const DEFAULT_STYLE = { position: null }
const [style, setStyle] = useState<Partial<{ position: string | null, top: string, left: string, maxWidth: string }>>(DEFAULT_STYLE) const [style, setStyle] =
useState<
Partial<{
position: string | null
top: string
left: string
maxWidth: string
}>
>(DEFAULT_STYLE)
const handleEdit = () => { const handleEdit = () => {
editingId && updateSavedSearch(editingId) editingId && updateSavedSearch(editingId)
setEditingId(null) setEditingId(null)
@ -535,7 +599,7 @@ function GenericTableCard(
onClick={() => onEditPress(savedSearch)} onClick={() => onEditPress(savedSearch)}
disabled={isCreateMode} disabled={isCreateMode}
> >
<PencilSimple size={24} color={"black"} /> <PencilSimple size={24} color={'black'} />
<StyledText <StyledText
color="$grayText" color="$grayText"
css={{ m: '0px', fontSize: '$5', marginLeft: '$2' }} css={{ m: '0px', fontSize: '$5', marginLeft: '$2' }}
@ -554,7 +618,9 @@ function GenericTableCard(
backgroundColor: 'transparent', backgroundColor: 'transparent',
border: 0, border: 0,
}} }}
onClick={() => (savedSearch ? deleteSavedSearch(savedSearch.id) : null)} onClick={() =>
savedSearch ? deleteSavedSearch(savedSearch.id) : null
}
disabled={isCreateMode} disabled={isCreateMode}
> >
<Trash size={24} color="#AA2D11" /> <Trash size={24} color="#AA2D11" />
@ -575,29 +641,41 @@ function GenericTableCard(
) )
} }
const onMouseDown= (e: MouseEvent) => { const onMouseDown = (e: MouseEvent) => {
if (savedSearch) { if (savedSearch) {
setDraggedElementId(savedSearch.id) setDraggedElementId(savedSearch.id)
setDraggedElementPosition({ y: e.clientY - 25, x: e.clientX - 25}) setDraggedElementPosition({ y: e.clientY - 25, x: e.clientX - 25 })
} }
} }
const onMouseUp = async (e: MouseEvent) => { const onMouseUp = async (e: MouseEvent) => {
if (draggedElementId != null && draggedElementId == savedSearch?.id && updatePositionOnMouseUp) { if (
draggedElementId != null &&
draggedElementId == savedSearch?.id &&
updatePositionOnMouseUp
) {
const updatePosition = updatePositionOnMouseUp(e.clientY) const updatePosition = updatePositionOnMouseUp(e.clientY)
setDraggedElementId(null); setDraggedElementId(null)
setStyle(DEFAULT_STYLE); setStyle(DEFAULT_STYLE)
setDraggedElementPosition(null); setDraggedElementPosition(null)
await updatePosition; await updatePosition
} }
} }
const onMouseMove = useCallback((e: MouseEvent) => { const onMouseMove = useCallback(
if (draggedElementId != null && draggedElementId == savedSearch?.id) { (e: MouseEvent) => {
setStyle({ position: "absolute", top: `${e.clientY - 25 + window.scrollY}px`, left: `${e.clientX - 25 + window.scrollX}px`, maxWidth: '865px' }); if (draggedElementId != null && draggedElementId == savedSearch?.id) {
setDraggedElementPosition({ y: e.clientY - 25, x: e.clientX - 25}); setStyle({
} position: 'absolute',
}, [draggedElementId, savedSearch, setDraggedElementPosition]) top: `${e.clientY - 25 + window.scrollY}px`,
left: `${e.clientX - 25 + window.scrollX}px`,
maxWidth: '865px',
})
setDraggedElementPosition({ y: e.clientY - 25, x: e.clientX - 25 })
}
},
[draggedElementId, savedSearch, setDraggedElementPosition]
)
useEffect(() => { useEffect(() => {
window.addEventListener('mousemove', onMouseMove) window.addEventListener('mousemove', onMouseMove)
@ -607,26 +685,29 @@ function GenericTableCard(
}, [draggedElementId, onMouseMove]) }, [draggedElementId, onMouseMove])
const setVisibility = async () => { const setVisibility = async () => {
await updateFilterMutation({ ...savedSearch, visible: !isVisible} ) await updateFilterMutation({ ...savedSearch, visible: !isVisible })
setIsVisible(!isVisible); setIsVisible(!isVisible)
} }
return ( return (
<TableCard <TableCard
className={"tableCard"} className={'tableCard'}
css={{ css={
...style, {
'&:hover': { ...style,
background: 'rgba(255, 234, 159, 0.12)', '&:hover': {
}, background: 'rgba(255, 234, 159, 0.12)',
borderTop: isSwappedCard ? `56px solid ${theme.colors.thBackground}` : undefined, },
borderTopLeftRadius: isFirstChild ? '5px' : '', borderTop: isSwappedCard
borderTopRightRadius: isFirstChild ? '5px' : '', ? `56px solid ${theme.colors.thBackground}`
borderBottomLeftRadius: isLastChild ? '5px' : '', : undefined,
borderBottomRightRadius: isLastChild ? '5px' : '', borderTopLeftRadius: isFirstChild ? '5px' : '',
} as never} borderTopRightRadius: isFirstChild ? '5px' : '',
borderBottomLeftRadius: isLastChild ? '5px' : '',
borderBottomRightRadius: isLastChild ? '5px' : '',
} as never
}
> >
<TableCardBox <TableCardBox
onMouseUp={onMouseUp as unknown as MouseEventHandler} onMouseUp={onMouseUp as unknown as MouseEventHandler}
css={{ css={{
@ -653,20 +734,24 @@ function GenericTableCard(
}} }}
> >
<HStack <HStack
distribution="start" distribution="start"
alignment="center" alignment="center"
css={{ css={{
padding: '0 5px', padding: '0 5px',
}} }}
> >
<ArrowsDownUp size={28} style={{ cursor: 'grab' }} onMouseDown={onMouseDown as unknown as MouseEventHandler} /> <ArrowsDownUp
</HStack> size={28}
style={{ cursor: 'grab' }}
onMouseDown={onMouseDown as unknown as MouseEventHandler}
/>
</HStack>
<HStack <HStack
distribution="start" distribution="start"
alignment="center" alignment="center"
css={{ css={{
padding: '0 5px', padding: '0 5px',
}} }}
> >
<CheckboxComponent checked={isVisible} setChecked={setVisibility} /> <CheckboxComponent checked={isVisible} setChecked={setVisibility} />
</HStack> </HStack>
@ -678,14 +763,13 @@ function GenericTableCard(
}} }}
> >
{showInput && !savedSearch ? ( {showInput && !savedSearch ? (
<SpanBox <SpanBox
css={{ css={{
'@smDown': { '@smDown': {
display: 'none', display: 'none',
}, },
}} }}
> >
<Input <Input
type="text" type="text"
value={nameInputText} value={nameInputText}
@ -703,7 +787,7 @@ function GenericTableCard(
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
overflow: 'hidden', overflow: 'hidden',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
paddingLeft: '15px' paddingLeft: '15px',
}} }}
> >
{editingId === savedSearch?.id {editingId === savedSearch?.id
@ -793,7 +877,7 @@ function GenericTableCard(
padding: '0px 8px', padding: '0px 8px',
}} }}
> >
{(editingId === savedSearch?.id || !savedSearch) ? ( {editingId === savedSearch?.id || !savedSearch ? (
<> <>
<Button <Button
style="plainIcon" style="plainIcon"
@ -808,7 +892,9 @@ function GenericTableCard(
style="ctaDarkYellow" style="ctaDarkYellow"
css={{ my: '0px', mr: '$1' }} css={{ my: '0px', mr: '$1' }}
disabled={!nameInputText && !queryInputText} disabled={!nameInputText && !queryInputText}
onClick={() => (savedSearch ? handleEdit() : createSavedSearch())} onClick={() =>
savedSearch ? handleEdit() : createSavedSearch()
}
> >
Saved Saved
</Button> </Button>
@ -827,7 +913,11 @@ function GenericTableCard(
> >
<IconButton <IconButton
style="ctaWhite" style="ctaWhite"
css={{ mr: '$1', background: '$labelButtonsBg', display: savedSearch?.defaultFilter ? "none" : "block" }} css={{
mr: '$1',
background: '$labelButtonsBg',
display: savedSearch?.defaultFilter ? 'none' : 'block',
}}
onClick={() => onEditPress(savedSearch)} onClick={() => onEditPress(savedSearch)}
disabled={isCreateMode} disabled={isCreateMode}
> >
@ -835,7 +925,11 @@ function GenericTableCard(
</IconButton> </IconButton>
<IconButton <IconButton
style="ctaWhite" style="ctaWhite"
css={{ mr: '$1', background: '$labelButtonsBg', display: savedSearch?.defaultFilter ? "none" : "block" }} css={{
mr: '$1',
background: '$labelButtonsBg',
display: savedSearch?.defaultFilter ? 'none' : 'block',
}}
onClick={() => deleteSavedSearch(savedSearch.id)} onClick={() => deleteSavedSearch(savedSearch.id)}
disabled={isCreateMode || savedSearch?.defaultFilter} disabled={isCreateMode || savedSearch?.defaultFilter}
> >