diff --git a/frontend/package.json b/frontend/package.json index 92bfca6f4a..f424ee434c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -38,6 +38,7 @@ "@mui/icons-material": "5.11.9", "@mui/lab": "5.0.0-alpha.120", "@mui/material": "5.11.10", + "@mui/x-date-pickers": "^6.18.3", "@tanstack/react-table": "^8.10.7", "@testing-library/dom": "8.20.1", "@testing-library/jest-dom": "5.17.0", @@ -142,6 +143,5 @@ "last 1 firefox version", "last 1 safari version" ] - }, - "dependencies": {} + } } diff --git a/frontend/src/component/common/FilterDateItem/FilterDateItem.tsx b/frontend/src/component/common/FilterDateItem/FilterDateItem.tsx new file mode 100644 index 0000000000..371f3e11fe --- /dev/null +++ b/frontend/src/component/common/FilterDateItem/FilterDateItem.tsx @@ -0,0 +1,99 @@ +import { Box } from '@mui/material'; +import React, { FC, useEffect, useRef, useState } from 'react'; +import { StyledPopover } from '../FilterItem/FilterItem.styles'; +import { FilterItemChip } from '../FilterItem/FilterItemChip/FilterItemChip'; +import { FilterItem } from '../FilterItem/FilterItem'; +import { DateCalendar, LocalizationProvider } from '@mui/x-date-pickers'; +import { parseISO, format } from 'date-fns'; +import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'; + +interface IFilterDateItemProps { + label: string; + onChange: (value: FilterItem | undefined) => void; + onChipClose: () => void; + state: FilterItem | null | undefined; + operators: [string, ...string[]]; +} + +export const FilterDateItem: FC = ({ + label, + onChange, + onChipClose, + state, + operators, +}) => { + const ref = useRef(null); + const [anchorEl, setAnchorEl] = useState(null); + const [searchText, setSearchText] = useState(''); + + const onClick = () => { + setAnchorEl(ref.current); + }; + + const onClose = () => { + setAnchorEl(null); + }; + + const selectedOptions = state ? state.values : []; + const selectedDate = state ? new Date(state.values[0]) : null; + const currentOperator = state ? state.operator : operators[0]; + + const onDelete = () => { + onChange(undefined); + onClose(); + onChipClose(); + }; + + const setValue = (value: Date | null) => { + const formattedValue = value ? format(value, 'MM/dd/yyyy') : ''; + onChange({ operator: currentOperator, values: [formattedValue] }); + }; + + useEffect(() => { + if (state && !operators.includes(state.operator)) { + onChange({ + operator: operators[0], + values: state.values, + }); + } + }, [state]); + + return ( + <> + + { + onChange({ operator, values: selectedOptions ?? [] }); + }} + /> + + + + setValue(newValue)} + /> + + + + ); +}; diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/FeatureToggleFilters.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/FeatureToggleFilters.tsx index 9aa1a7cb02..f39065f50e 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/FeatureToggleFilters.tsx +++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/FeatureToggleFilters.tsx @@ -5,6 +5,7 @@ import useProjects from 'hooks/api/getters/useProjects/useProjects'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import AddFilterButton from './AddFilterButton'; import { useSegments } from 'hooks/api/getters/useSegments/useSegments'; +import { FilterDateItem } from '../../../common/FilterDateItem/FilterDateItem'; const StyledBox = styled(Box)(({ theme }) => ({ display: 'flex', @@ -16,6 +17,7 @@ export type FeatureTogglesListFilters = { project?: FilterItem | null | undefined; state?: FilterItem | null | undefined; segment?: FilterItem | null | undefined; + createdAt?: FilterItem | null | undefined; }; interface IFeatureToggleFiltersProps { @@ -114,6 +116,7 @@ export const FeatureToggleFilters: VFC = ({ State: Boolean(state.state), Project: Boolean(state.project), Segment: Boolean(state.segment), + 'Created date': Boolean(state.createdAt), }; setVisibleFilters(filterVisibility); }, [JSON.stringify(state)]); @@ -141,6 +144,19 @@ export const FeatureToggleFilters: VFC = ({ /> ), )} + onChange({ createdAt: value })} + operators={['IS_ON_OR_AFTER', 'IS_BEFORE']} + onChipClose={() => hideFilter('Created date')} + /> + } + /> + { project: FilterItemParam, state: FilterItemParam, segment: FilterItemParam, + createdAt: FilterItemParam, }; const [tableState, setTableState] = usePersistentTableState( 'features-list-table', diff --git a/frontend/src/hooks/usePersistentTableState.ts b/frontend/src/hooks/usePersistentTableState.ts index 20989d5dc9..a336a6d199 100644 --- a/frontend/src/hooks/usePersistentTableState.ts +++ b/frontend/src/hooks/usePersistentTableState.ts @@ -18,7 +18,6 @@ const usePersistentSearchParams = ( if (Object.keys(value).length === 0) { return; } - setSearchParams( encodeQueryParams(queryParamsDefinition, value) as Record< string, diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 64560caeac..77905499fb 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -419,6 +419,13 @@ dependencies: regenerator-runtime "^0.13.11" +"@babel/runtime@^7.23.2", "@babel/runtime@^7.23.4": + version "7.23.5" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.5.tgz#11edb98f8aeec529b82b211028177679144242db" + integrity sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/template@^7.20.7": version "7.20.7" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8" @@ -1156,6 +1163,33 @@ resolved "https://registry.yarnpkg.com/@exodus/schemasafe/-/schemasafe-1.3.0.tgz#731656abe21e8e769a7f70a4d833e6312fe59b7f" integrity sha512-5Aap/GaRupgNx/feGBwLLTVv8OQFfv3pq2lPRzPg9R+IOBnDgghTGW7l7EuVXOvg5cc/xSAlRW8rBrjIC3Nvqw== +"@floating-ui/core@^1.4.2": + version "1.5.2" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.2.tgz#53a0f7a98c550e63134d504f26804f6b83dbc071" + integrity sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A== + dependencies: + "@floating-ui/utils" "^0.1.3" + +"@floating-ui/dom@^1.5.1": + version "1.5.3" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa" + integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA== + dependencies: + "@floating-ui/core" "^1.4.2" + "@floating-ui/utils" "^0.1.3" + +"@floating-ui/react-dom@^2.0.4": + version "2.0.4" + resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.4.tgz#b076fafbdfeb881e1d86ae748b7ff95150e9f3ec" + integrity sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ== + dependencies: + "@floating-ui/dom" "^1.5.1" + +"@floating-ui/utils@^0.1.3": + version "0.1.6" + resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9" + integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A== + "@fortawesome/fontawesome-common-types@6.4.2": version "6.4.2" resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz#1766039cad33f8ad87f9467b98e0d18fbc8f01c5" @@ -1372,6 +1406,19 @@ prop-types "^15.8.1" react-is "^18.2.0" +"@mui/base@^5.0.0-beta.22": + version "5.0.0-beta.26" + resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.26.tgz#5fab6062238dc17dd840bf1a17ab759370452713" + integrity sha512-gPMRKC84VRw+tjqYoyBzyrBUqHQucMXdlBpYazHa5rCXrb91fYEQk5SqQ2U5kjxx9QxZxTBvWAmZ6DblIgaGhQ== + dependencies: + "@babel/runtime" "^7.23.4" + "@floating-ui/react-dom" "^2.0.4" + "@mui/types" "^7.2.10" + "@mui/utils" "^5.14.20" + "@popperjs/core" "^2.11.8" + clsx "^2.0.0" + prop-types "^15.8.1" + "@mui/core-downloads-tracker@^5.11.9": version "5.11.9" resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.9.tgz#0d3b20c2ef7704537c38597f9ecfc1894fe7c367" @@ -1449,6 +1496,11 @@ csstype "^3.1.1" prop-types "^15.8.1" +"@mui/types@^7.2.10": + version "7.2.10" + resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.10.tgz#13e3e9aa07ee6d593cfacd538e02e8e896d7a12f" + integrity sha512-wX1vbDC+lzF7FlhT6A3ffRZgEoKWPF8VqRoTu4lZwouFX2t90KyCMsgepMw5DxLak1BSp/KP86CmtZttikb/gQ== + "@mui/types@^7.2.3": version "7.2.3" resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.3.tgz#06faae1c0e2f3a31c86af6f28b3a4a42143670b9" @@ -1465,6 +1517,29 @@ prop-types "^15.8.1" react-is "^18.2.0" +"@mui/utils@^5.14.16", "@mui/utils@^5.14.20": + version "5.14.20" + resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.20.tgz#6d57b8ef02633fbeef51de8f74a2388cde7da8b9" + integrity sha512-Y6yL5MoFmtQml20DZnaaK1znrCEwG6/vRSzW8PKOTrzhyqKIql0FazZRUR7sA5EPASgiyKZfq0FPwISRXm5NdA== + dependencies: + "@babel/runtime" "^7.23.4" + "@types/prop-types" "^15.7.11" + prop-types "^15.8.1" + react-is "^18.2.0" + +"@mui/x-date-pickers@^6.18.3": + version "6.18.3" + resolved "https://registry.yarnpkg.com/@mui/x-date-pickers/-/x-date-pickers-6.18.3.tgz#a857adbe1591432f4cb87fdbb10c92ecb744b29a" + integrity sha512-DmJrAAr6EfhuWA9yubANAdeQayAbUppCezdhxkYKwn38G8+HJPZBol0V5fKji+B4jMxruO78lkQYsGUxVxaR7A== + dependencies: + "@babel/runtime" "^7.23.2" + "@mui/base" "^5.0.0-beta.22" + "@mui/utils" "^5.14.16" + "@types/react-transition-group" "^4.4.8" + clsx "^2.0.0" + prop-types "^15.8.1" + react-transition-group "^4.4.5" + "@nodelib/fs.scandir@2.1.5": version "2.1.5" resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5" @@ -1570,6 +1645,11 @@ resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45" integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw== +"@popperjs/core@^2.11.8": + version "2.11.8" + resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f" + integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A== + "@remix-run/router@1.9.0": version "1.9.0" resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.9.0.tgz#9033238b41c4cbe1e961eccb3f79e2c588328cf6" @@ -2148,6 +2228,11 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== +"@types/prop-types@^15.7.11": + version "15.7.11" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563" + integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng== + "@types/react-dom@17.0.25", "@types/react-dom@<18.0.0", "@types/react-dom@>=16.9.0": version "17.0.25" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.25.tgz#e0e5b3571e1069625b3a3da2b279379aa33a0cb5" @@ -2221,6 +2306,13 @@ dependencies: "@types/react" "*" +"@types/react-transition-group@^4.4.8": + version "4.4.10" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac" + integrity sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q== + dependencies: + "@types/react" "*" + "@types/react@*", "@types/react@17.0.71", "@types/react@>=16.9.0", "@types/react@^17": version "17.0.71" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.71.tgz#3673d446ad482b1564e44bf853b3ab5bcbc942c4" @@ -2977,6 +3069,11 @@ clsx@^1.2.1: resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== +clsx@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b" + integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q== + code-red@^1.0.3: version "1.0.4" resolved "https://registry.yarnpkg.com/code-red/-/code-red-1.0.4.tgz#59ba5c9d1d320a4ef795bc10a28bd42bfebe3e35" @@ -6497,6 +6594,11 @@ regenerator-runtime@^0.13.11: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9" integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg== +regenerator-runtime@^0.14.0: + version "0.14.0" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45" + integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA== + regexp.prototype.flags@^1.4.3, regexp.prototype.flags@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz#90ce989138db209f81492edd734183ce99f9677e" diff --git a/src/lib/features/feature-search/feature.search.e2e.test.ts b/src/lib/features/feature-search/feature.search.e2e.test.ts index 0753b28d4a..450cf07d17 100644 --- a/src/lib/features/feature-search/feature.search.e2e.test.ts +++ b/src/lib/features/feature-search/feature.search.e2e.test.ts @@ -829,15 +829,13 @@ test('should search features by created date with operators', async () => { createdAt: '2023-01-29T15:21:39.975Z', }); - const { body } = await filterFeaturesByCreated( - 'IS_BEFORE:2023-01-28T15:21:39.975Z', - ); + const { body } = await filterFeaturesByCreated('IS_BEFORE:01/28/2023'); expect(body).toMatchObject({ features: [{ name: 'my_feature_a' }], }); const { body: afterBody } = await filterFeaturesByCreated( - 'IS_ON_OR_AFTER:2023-01-28T15:21:39.975Z', + 'IS_ON_OR_AFTER:01/28/2023', ); expect(afterBody).toMatchObject({ features: [{ name: 'my_feature_b' }], @@ -863,7 +861,7 @@ test('should filter features by combined operators', async () => { const { body } = await filterFeaturesByOperators( 'IS_NOT:active', 'DO_NOT_INCLUDE:simple:my_tag', - 'IS_BEFORE:2023-01-28T15:21:39.975Z', + 'IS_BEFORE:01/28/2023', ); expect(body).toMatchObject({ features: [{ name: 'my_feature_a' }], diff --git a/src/lib/openapi/spec/feature-search-query-parameters.ts b/src/lib/openapi/spec/feature-search-query-parameters.ts index 62b10d14a7..6519b2f613 100644 --- a/src/lib/openapi/spec/feature-search-query-parameters.ts +++ b/src/lib/openapi/spec/feature-search-query-parameters.ts @@ -137,9 +137,8 @@ export const featureSearchQueryParameters = [ name: 'createdAt', schema: { type: 'string', - example: 'IS_ON_OR_AFTER:2023-01-28T15:21:39.975Z', - pattern: - '^(IS_BEFORE|IS_ON_OR_AFTER):\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}\\.\\d{3}Z$', + example: 'IS_ON_OR_AFTER:28/01/2023', + pattern: '^(IS_BEFORE|IS_ON_OR_AFTER):\\d{2}\\/\\d{2}\\/\\d{4}$', }, description: 'The date the feature was created. The date can be specified with an operator. The supported operators are IS_BEFORE, IS_ON_OR_AFTER.',