Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

feat: add created date filter component (#5569)

Browse Source
This commit is contained in:
Jaanus Sellin 2023-12-08 10:07:57 +02:00 committed by GitHub
parent 896202e5ae
commit 1173b664da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 225 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/package.json
View File

@ -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": {}
}
}

99
frontend/src/component/common/FilterDateItem/FilterDateItem.tsx Normal file
View File

@ -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<IFilterDateItemProps> = ({
label,
onChange,
onChipClose,
state,
operators,
}) => {
const ref = useRef<HTMLDivElement>(null);
const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(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 (
<>
<Box ref={ref}>
<FilterItemChip
label={label}
selectedOptions={selectedOptions}
onDelete={onDelete}
onClick={onClick}
operator={currentOperator}
operatorOptions={operators}
onChangeOperator={(operator) => {
onChange({ operator, values: selectedOptions ?? [] });
}}
/>
</Box>
<StyledPopover
open={Boolean(anchorEl)}
anchorEl={anchorEl}
onClose={onClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DateCalendar
displayWeekNumber
value={selectedDate}
onChange={(newValue) => setValue(newValue)}
/>
</LocalizationProvider>
</StyledPopover>
</>
);
};

16
frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/FeatureToggleFilters.tsx
View File

@ -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<IFeatureToggleFiltersProps> = ({
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<IFeatureToggleFiltersProps> = ({
/>
),
)}
<ConditionallyRender
condition={Boolean(visibleFilters['Created date'])}
show={
<FilterDateItem
label={'Created date'}
state={state.createdAt}
onChange={(value) => onChange({ createdAt: value })}
operators={['IS_ON_OR_AFTER', 'IS_BEFORE']}
onChipClose={() => hideFilter('Created date')}
/>
}
/>
<ConditionallyRender
condition={hasAvailableFilters}
show={

1
frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
View File

@ -85,6 +85,7 @@ export const FeatureToggleListTable: VFC = () => {
project: FilterItemParam,
state: FilterItemParam,
segment: FilterItemParam,
createdAt: FilterItemParam,
};
const [tableState, setTableState] = usePersistentTableState(
'features-list-table',

1
frontend/src/hooks/usePersistentTableState.ts
View File

@ -18,7 +18,6 @@ const usePersistentSearchParams = <T extends QueryParamConfigMap>(
if (Object.keys(value).length === 0) {
return;
}
setSearchParams(
encodeQueryParams(queryParamsDefinition, value) as Record<
string,

102
frontend/yarn.lock
View File

@ -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"

8
src/lib/features/feature-search/feature.search.e2e.test.ts
View File

@ -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' }],

5
src/lib/openapi/spec/feature-search-query-parameters.ts
View File

@ -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.',