Skip to content

Commit

Permalink
Faceted Search (#3712)
Browse files Browse the repository at this point in the history
* FS WIP

* gql api and ui model WIP

* more plumbing. now it loads somehow

* update gql schema

* regen types, update queries

* more plumbing

* more plumbing

* compute filter expression

* handle numeric facets

* adjust schema WIP

* simplify the model somewhat

* further work

* further work

* further work, working filters

* facet query, keyword widget

* Max's UI stuff (#3719)

* utils/JSONPointer: mark path as readonly to fix type errors

* remove unnecessary types

* fix date range predicate serialization

* remove unused components, use {min,max} instead of [min, max]

* reuse container for both cases

* adjusted DatesRange format: [from, to] -> {min, max}

* hide search bar if enum is small

* use Keyword widget for enums; add fuzzy search for available filters

* move AvailableFacets to module

* move buckets and resulttype to modules, and remove extra wrapper

* use tiny TextField consistently

* use JSONPointer for consistency

* fix result type

* use fuzzy search for enum items, make empty state similar to available facets empty state

* fix buckets selectin

* handle fetching state

* show search results skeleton

* setOrder action

* add sort widget

* generic suffixes for numbers

* fix keyword extents by including values

* more facets, cleanup

* button effect for list items, dense layout

* better sort descriptions; remove relevance ascending

* clear facets action

* add empty results state

* move navbar state to react context; so, I can toggle search outside navbar

* dont stretch results column

* empty state for unbounded search

* add error empty state

* re-use UnboundedResults component

* styles for "load more" button

* show title for available filter chip

* fix when extents are [0, 0]

* eslintrc: allow _tag

* adjust model and ui

* add filter activator

* use Filters.Activator for activating filters

* more compact layout; keyword filter is not ready

* add missing files

* add workflow filter

* object filters activators

* adjust margins

* white background and for inputs

* fix sort value

* align more button with activators

* add sortBy message

* more elegant indentation

* search suggestions

* remove duplicate data

* gql provider: more keys

* components/SelectDropdown: support customizing some styles

* Search/Sort: adjust styles a little bit

* empty results on error; clear filters button in empty results; fix search bar focus

* fix overflowing sidebar when long values

* show empty strings as "EMPTY STRING"

* align title and close button

* better layout for boolean/checkbox

* keyword wildcard vs text query string queries

* move threshold to the top; and increase value

* fix empty list message condition

* group metadata filters; filter them with text field; more consistent dividers

* preserve metadata filter activation state

* preserve filter order

* reset "next page loaded" state when changing inputs, cleanup

* add useId hook

* fix boolean filter

* KeyedTree data structure

* group and limit facets

* facets threshold

* make facets depend on upstream filters (but not other facets)

* add missing generated gql stuff

* remove unused classes

* filter by type

* visual hierarchy outline for Metadata header

* add styles for metadata filters hierarchy

* fix filtering

* onExpand -> onMore, fix key, fix second-level nesting, grow expanded height

* prettify .graphql

* progress indication, cleanup

* denser icon spacing

* account for total <= 0 (secure search)

* consistent title outline

* less button for main filters

* visible overflow for metadata filters

* move more button state into component level, add less button

* consistent icon margins

* fix visibility of more button, animated collapse/expand

* disable metadata activators on fetching

* add scroll to top button

* use list for result type selector

* titles: search for...filter by...metadata; use one component for identical titles, denser margins

* add borders to feel more aligned

* always show search suggestions outside search page

* dont compensate buckets fieldset legend

* replace magnificent glass button with icon

* replace magnificent glass button with icon on open

* "search ANY object/package" suggestion

* show suggestion on search page without query

* remove `helpOpen` prop from DOM

* rm model/Search

* mv userMetaFIlters to its own arg, improve URL encoding

* support legacy "mode" param

* model.tsx -> model.ts

* support legacy "buckets" param

* consistent border color

* skeleton for results count

* show "All buckets" when no buckets selected

* reserved space for "scroll to top" button

* basic placeholder

* fix search input border radius

* cleanup the model a little

* align column titles

* rm unused gql field

* Bump debian in /lambdas/thumbnail (#3727)

Bumps debian from bullseye-20230904-slim to bullseye-20230919-slim.

---
updated-dependencies:
- dependency-name: debian
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump debian in /s3-proxy (#3726)

Bumps debian from bullseye-20230904-slim to bullseye-20230919-slim.

---
updated-dependencies:
- dependency-name: debian
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump nginx from `f959805` to `7334183` in /catalog (#3729)

Bumps nginx from `f959805` to `7334183`.

---
updated-dependencies:
- dependency-name: nginx
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump debian from `34b4145` to `c618be8` in /lambdas/thumbnail (#3728)

Bumps debian from `34b4145` to `c618be8`.

---
updated-dependencies:
- dependency-name: debian
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump debian from `34b4145` to `c618be8` in /s3-proxy (#3730)

Bumps debian from `34b4145` to `c618be8`.

---
updated-dependencies:
- dependency-name: debian
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump cryptography from 41.0.3 to 41.0.4 in /lambdas/es/indexer (#3731)

Bumps [cryptography](https://github.com/pyca/cryptography) from 41.0.3 to 41.0.4.
- [Changelog](https://github.com/pyca/cryptography/blob/main/CHANGELOG.rst)
- [Commits](pyca/cryptography@41.0.3...41.0.4)

---
updated-dependencies:
- dependency-name: cryptography
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Fix header meaning and improve formatting in Athena example (#3732)

* Fix fallback component syntax (#3735)

* Docs for managed Athena tables (#3733)

* Fix header meaning and improve formatting in Athena example

* Docs for managed Athena tables

* Update docs/advanced-features/athena.md

Co-authored-by: Dr. Ernie Prabhakar <[email protected]>

---------

Co-authored-by: Dr. Ernie Prabhakar <[email protected]>

* Rebase the catalog Docker image from "nginx" to "amazonlinux" (#3736)

* Rebase the catalog Docker image from "nginx" to "amazonlinux"

This fixes vulnerabilities found by the ECR scanner.

The nginx base image contains a production-ready nginx.conf that sets a few sane defaults and loads everything else from the "conf.d" dir.
The default nginx.conf, on the other hand, configures a server on port 80 that displays "Welcome to nginx".
Therefore, we're now overwriting nginx.conf, too, in addition to adding the catalog config.

"server_tokens off;" is moved to the main config where it actually belongs.

A few things are added to the Dockerfile that the nginx base image Dockerfile used to do.

* more fixes

* add a comment

* fix comments

* switch to 2023

* Rebase s3-proxy Docker image from "debian" to "amazonlinux" (#3737)

* Rebase s3-proxy Docker image from "debian" to "amazonlinux"

This fixes vulnerabilities found by the ECR scanner.

Also upgrade nginx to 1.24.0.

* Switch to 2023. Remove git.

* Fix certs

* Add docs on EDP networking (#3739)

* Bump urllib3 from 1.26.8 to 1.26.17 in /lambdas/tabular_preview (#3750)

Bumps [urllib3](https://github.com/urllib3/urllib3) from 1.26.8 to 1.26.17.
- [Release notes](https://github.com/urllib3/urllib3/releases)
- [Changelog](https://github.com/urllib3/urllib3/blob/main/CHANGES.rst)
- [Commits](urllib3/urllib3@1.26.8...1.26.17)

---
updated-dependencies:
- dependency-name: urllib3
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump urllib3 from 1.26.5 to 1.26.17 in /lambdas/es/indexer (#3748)

Bumps [urllib3](https://github.com/urllib3/urllib3) from 1.26.5 to 1.26.17.
- [Release notes](https://github.com/urllib3/urllib3/releases)
- [Changelog](https://github.com/urllib3/urllib3/blob/main/CHANGES.rst)
- [Commits](urllib3/urllib3@1.26.5...1.26.17)

---
updated-dependencies:
- dependency-name: urllib3
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump urllib3 from 1.26.5 to 1.26.17 in /lambdas/preview (#3747)

Bumps [urllib3](https://github.com/urllib3/urllib3) from 1.26.5 to 1.26.17.
- [Release notes](https://github.com/urllib3/urllib3/releases)
- [Changelog](https://github.com/urllib3/urllib3/blob/main/CHANGES.rst)
- [Commits](urllib3/urllib3@1.26.5...1.26.17)

---
updated-dependencies:
- dependency-name: urllib3
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump urllib3 from 1.26.5 to 1.26.17 in /lambdas/s3select (#3746)

Bumps [urllib3](https://github.com/urllib3/urllib3) from 1.26.5 to 1.26.17.
- [Release notes](https://github.com/urllib3/urllib3/releases)
- [Changelog](https://github.com/urllib3/urllib3/blob/main/CHANGES.rst)
- [Commits](urllib3/urllib3@1.26.5...1.26.17)

---
updated-dependencies:
- dependency-name: urllib3
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump urllib3 from 1.26.14 to 1.26.17 in /lambdas/thumbnail (#3742)

Bumps [urllib3](https://github.com/urllib3/urllib3) from 1.26.14 to 1.26.17.
- [Release notes](https://github.com/urllib3/urllib3/releases)
- [Changelog](https://github.com/urllib3/urllib3/blob/main/CHANGES.rst)
- [Commits](urllib3/urllib3@1.26.14...1.26.17)

---
updated-dependencies:
- dependency-name: urllib3
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump urllib3 from 1.26.15 to 1.26.17 in /lambdas/pkgevents (#3743)

Bumps [urllib3](https://github.com/urllib3/urllib3) from 1.26.15 to 1.26.17.
- [Release notes](https://github.com/urllib3/urllib3/releases)
- [Changelog](https://github.com/urllib3/urllib3/blob/main/CHANGES.rst)
- [Commits](urllib3/urllib3@1.26.15...1.26.17)

---
updated-dependencies:
- dependency-name: urllib3
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump urllib3 from 1.26.15 to 1.26.17 in /lambdas/pkgselect (#3744)

Bumps [urllib3](https://github.com/urllib3/urllib3) from 1.26.15 to 1.26.17.
- [Release notes](https://github.com/urllib3/urllib3/releases)
- [Changelog](https://github.com/urllib3/urllib3/blob/main/CHANGES.rst)
- [Commits](urllib3/urllib3@1.26.15...1.26.17)

---
updated-dependencies:
- dependency-name: urllib3
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump urllib3 from 1.26.15 to 1.26.17 in /lambdas/pkgpush (#3745)

Bumps [urllib3](https://github.com/urllib3/urllib3) from 1.26.15 to 1.26.17.
- [Release notes](https://github.com/urllib3/urllib3/releases)
- [Changelog](https://github.com/urllib3/urllib3/blob/main/CHANGES.rst)
- [Commits](urllib3/urllib3@1.26.15...1.26.17)

---
updated-dependencies:
- dependency-name: urllib3
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump urllib3 from 1.26.12 to 1.26.17 in /lambdas/status_reports (#3741)

Bumps [urllib3](https://github.com/urllib3/urllib3) from 1.26.12 to 1.26.17.
- [Release notes](https://github.com/urllib3/urllib3/releases)
- [Changelog](https://github.com/urllib3/urllib3/blob/main/CHANGES.rst)
- [Commits](urllib3/urllib3@1.26.12...1.26.17)

---
updated-dependencies:
- dependency-name: urllib3
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump urllib3 from 1.26.9 to 1.26.17 in /lambdas/molecule (#3751)

Bumps [urllib3](https://github.com/urllib3/urllib3) from 1.26.9 to 1.26.17.
- [Release notes](https://github.com/urllib3/urllib3/releases)
- [Changelog](https://github.com/urllib3/urllib3/blob/main/CHANGES.rst)
- [Commits](urllib3/urllib3@1.26.9...1.26.17)

---
updated-dependencies:
- dependency-name: urllib3
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump pillow from 9.4.0 to 10.0.1 in /lambdas/thumbnail (#3753)

Bumps [pillow](https://github.com/python-pillow/Pillow) from 9.4.0 to 10.0.1.
- [Release notes](https://github.com/python-pillow/Pillow/releases)
- [Changelog](https://github.com/python-pillow/Pillow/blob/main/CHANGES.rst)
- [Commits](python-pillow/Pillow@9.4.0...10.0.1)

---
updated-dependencies:
- dependency-name: pillow
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump urllib3 from 1.26.11 to 1.26.17 in /testdocs (#3740)

Bumps [urllib3](https://github.com/urllib3/urllib3) from 1.26.11 to 1.26.17.
- [Release notes](https://github.com/urllib3/urllib3/releases)
- [Changelog](https://github.com/urllib3/urllib3/blob/main/CHANGES.rst)
- [Commits](urllib3/urllib3@1.26.11...1.26.17)

---
updated-dependencies:
- dependency-name: urllib3
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump debian in /lambdas/thumbnail (#3760)

Bumps debian from bullseye-20230919-slim to bullseye-20231009-slim.

---
updated-dependencies:
- dependency-name: debian
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump amazonlinux from 2023.2.20230920.1 to 2023.2.20231011.0 in /catalog (#3763)

Bumps amazonlinux from 2023.2.20230920.1 to 2023.2.20231011.0.

---
updated-dependencies:
- dependency-name: amazonlinux
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump amazonlinux in /s3-proxy (#3762)

Bumps amazonlinux from 2023.2.20230920.1 to 2023.2.20231011.0.

---
updated-dependencies:
- dependency-name: amazonlinux
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Index metadata fields (#3656)

* Index metadata fields

* Index package workflow in ES (#3706)

* fix test

* use json pointer instead of dot path

* index config version id

* index text arrays, always put "text" value

* fix test

* use global logger instead of print

* remove a comment

* tests

* moar tests

* lint

* rm some unused code

* more cleanup

* remove unused file

* adjust some copy

* changelog

* add result type icons

* adjust casing

* adjust suggestions copy

* adjust suggestions

* adjust copy

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: Maksim Chervonnyi <[email protected]>
Co-authored-by: Maxim Chervonny <[email protected]>
Co-authored-by: Maksim Chervonnyi <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Sergey Fedoseev <[email protected]>
Co-authored-by: Dr. Ernie Prabhakar <[email protected]>
Co-authored-by: Dima Ryazanov <[email protected]>
Co-authored-by: Aneesh Karve <[email protected]>
  • Loading branch information
9 people authored Oct 13, 2023
1 parent bf660b0 commit 6ba9401
Show file tree
Hide file tree
Showing 59 changed files with 7,723 additions and 1,243 deletions.
2 changes: 1 addition & 1 deletion catalog/.eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ module.exports = {
'max-classes-per-file': 0,
'no-console': 2,
'no-nested-ternary': 1,
'no-underscore-dangle': [2, { allow: ['_', '__', '__typename'] }],
'no-underscore-dangle': [2, { allow: ['_', '__', '__typename', '_tag'] }],
'prefer-arrow-callback': [2, { allowNamedFunctions: true }],
'prefer-template': 2,
'react-hooks/exhaustive-deps': 2,
Expand Down
12 changes: 6 additions & 6 deletions catalog/app/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { createBrowserHistory as createHistory } from 'history'
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Router } from 'react-router-dom'
import { createSelector } from 'reselect'
import * as M from '@material-ui/core'

// initialize config from window.QUILT_CATALOG_CONFIG
Expand Down Expand Up @@ -67,16 +68,15 @@ const MOUNT_NODE = document.getElementById('app')
// TODO: make storage injectable
const storage = mkStorage({ user: 'USER', tokens: 'TOKENS' })

const intercomUserSelector = (state: $TSFixMe) => {
const { user: u } = Auth.selectors.domain(state)
return (
const intercomUserSelector = createSelector(
Auth.selectors.domain,
({ user: u }) =>
u && {
user_id: u.current_user,
name: u.current_user,
email: u.email,
}
)
}
},
)

const render = () => {
ReactDOM.render(
Expand Down
29 changes: 29 additions & 0 deletions catalog/app/components/Filters/Activator.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import * as React from 'react'
import * as M from '@material-ui/core'

const useStyles = M.makeStyles((t) => ({
icon: {
minWidth: t.spacing(4),
},
}))

interface ActivatorProps {
disabled?: boolean
onClick: () => void
title: React.ReactNode
}

export default React.forwardRef<HTMLDivElement, ActivatorProps>(function Activator(
{ disabled, onClick, title },
ref,
) {
const classes = useStyles()
return (
<M.ListItem button disableGutters disabled={disabled} onClick={onClick} ref={ref}>
<M.ListItemIcon className={classes.icon}>
<M.Icon>add_circle_outline</M.Icon>
</M.ListItemIcon>
<M.ListItemText primary={title} />
</M.ListItem>
)
})
77 changes: 77 additions & 0 deletions catalog/app/components/Filters/BooleanFilter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import cx from 'classnames'
import * as React from 'react'
import * as M from '@material-ui/core'

import useId from 'utils/useId'

const useStyles = M.makeStyles((t) => ({
root: {
border: `1px solid ${t.palette.divider}`,
borderRadius: t.shape.borderRadius,
},
checkboxWrapper: {
minWidth: t.spacing(4),
paddingLeft: '2px',
},
label: {
cursor: 'pointer',
display: 'block',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
listItem: {
padding: 0,
},
}))

const KEYS = ['true', 'false'] as const

type Key = (typeof KEYS)[number]

type BooleanFilterValue = {
[key in Key]: boolean
}

interface BooleanFilterProps {
className?: string
value: BooleanFilterValue
onChange: (v: BooleanFilterValue) => void
}

export default function BooleanFilter({
className,
value,
onChange,
}: BooleanFilterProps) {
const classes = useStyles()
const id = useId()
const handleChange = React.useCallback(
(key: Key, checked: boolean) => {
onChange({ ...value, [key]: checked })
},
[onChange, value],
)
return (
<div className={cx(classes.root, className)}>
<M.List dense disablePadding>
{KEYS.map((key) => (
<M.ListItem key={key} disableGutters className={classes.listItem} button>
<M.ListItemIcon className={classes.checkboxWrapper}>
<M.Checkbox
checked={value[key]}
id={`${key}_${id}`}
onChange={(event, checked) => handleChange(key, checked)}
size="small"
/>
</M.ListItemIcon>
<M.ListItemText>
<label className={classes.label} htmlFor={`${key}_${id}`}>
{key}
</label>
</M.ListItemText>
</M.ListItem>
))}
</M.List>
</div>
)
}
93 changes: 93 additions & 0 deletions catalog/app/components/Filters/Container.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import cx from 'classnames'
import * as React from 'react'
import * as M from '@material-ui/core'
import { fade } from '@material-ui/core/styles'

import Skeleton from 'components/Skeleton'

const useStyles = M.makeStyles((t) => ({
root: {},
close: {},
content: {
display: 'flex',
flexDirection: 'column',
padding: t.spacing(0, 0, 2),
position: 'relative',
},
header: {
alignItems: 'center',
display: 'flex',
justifyContent: 'space-between',
margin: t.spacing(0, 0, 1.5),
},
title: {
...t.typography.body2,
fontWeight: 500,
},
lock: {
alignItems: 'center',
animation: '$showLock .3s ease-out',
background: fade(t.palette.background.paper, 0.7),
bottom: 0,
display: 'flex',
justifyContent: 'center',
left: 0,
position: 'absolute',
right: 0,
top: 0,
},
spinner: {},
'@keyframes showLock': {
'0%': {
transform: 'scale(1.2x)',
},
'100%': {
transform: 'scale(1)',
},
},
}))

interface ContainerProps {
children?: React.ReactNode
className?: string
extenting?: boolean
onDeactivate?: () => void
title: React.ReactNode
defaultExpanded?: boolean
}

export default function Container({
className,
children,
title,
extenting,
onDeactivate,
}: ContainerProps) {
const classes = useStyles()
return (
<div className={cx(classes.root, className)}>
<div className={classes.header}>
<div className={classes.title}>{title}</div>
{onDeactivate && (
<M.IconButton size="small" className={classes.close} onClick={onDeactivate}>
<M.Icon fontSize="inherit">clear</M.Icon>
</M.IconButton>
)}
</div>
<div className={classes.content}>
{children ? (
<>
{children}
{extenting && (
<div className={classes.lock}>
<M.CircularProgress className={classes.spinner} size={28} />
</div>
)}
</>
) : (
<Skeleton height={32} />
)}
</div>
</div>
)
}
63 changes: 63 additions & 0 deletions catalog/app/components/Filters/DatesRange.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import * as dateFns from 'date-fns'
import * as React from 'react'
import * as M from '@material-ui/core'

const ymdToDate = (ymd: string): Date => new Date(ymd)

const dateToYmd = (date: Date): string => dateFns.format(date, 'yyyy-MM-dd')

const useStyles = M.makeStyles((t) => {
const gap = t.spacing(1)
return {
root: {
display: 'grid',
gridTemplateColumns: `calc(50% - ${gap / 2}px) calc(50% - ${gap / 2}px)`,
columnGap: gap,
},
input: {
background: t.palette.background.paper,
},
}
})

interface DateRangeProps {
extents: { min: Date; max: Date }
onChange: (v: { min: Date | null; max: Date | null }) => void
value: { min: Date | null; max: Date | null }
}

export default function DatesRange({ extents, value, onChange }: DateRangeProps) {
const classes = useStyles()
const min = value.min || extents.min
const max = value.max || extents.max
const handleFrom = React.useCallback(
(event) => onChange({ min: ymdToDate(event.target.value), max }),
[onChange, max],
)
const handleTo = React.useCallback(
(event) => onChange({ min, max: ymdToDate(event.target.value) }),
[onChange, min],
)
return (
<div className={classes.root}>
<M.TextField
className={classes.input}
label="From"
onChange={handleFrom}
size="small"
type="date"
value={dateToYmd(min)}
variant="outlined"
/>
<M.TextField
className={classes.input}
label="To"
onChange={handleTo}
size="small"
type="date"
value={dateToYmd(max)}
variant="outlined"
/>
</div>
)
}
Loading

0 comments on commit 6ba9401

Please sign in to comment.