feat: add created date filter component (#5569)

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

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<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>
+        </>
+    );
+};

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<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={

frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx

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

frontend/src/hooks/usePersistentTableState.ts

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

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"

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(
+    const { body } = await filterFeaturesByCreated('IS_BEFORE:01/28/2023');
-        'IS_BEFORE:2023-01-28T15:21:39.975Z',
-    );
     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' }],

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',
+            example: 'IS_ON_OR_AFTER:28/01/2023',
-            pattern:
+            pattern: '^(IS_BEFORE|IS_ON_OR_AFTER):\\d{2}\\/\\d{2}\\/\\d{4}$',
-                '^(IS_BEFORE|IS_ON_OR_AFTER):\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}\\.\\d{3}Z$',
         },
         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.',