Feature/date fitler

src/components/Errors/GlobalErrorsList/DaysFilter/index.tsx

@@ -1,5 +1,6 @@
 import { ChangeEvent, useCallback, useEffect, useMemo, useState } from "react";
 import { usePrevious } from "../../../../hooks/usePrevious";
+import { DAYS_FILTER_DEFAULT_VALUE } from "../../../../store/errors/errorsSlice";
 import { isUndefined } from "../../../../typeGuards/isUndefined";
 import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
 import { formatUnit } from "../../../../utils/formatUnit";
@@ -22,18 +23,16 @@ const getOptionLabel = (days: number) => `${days} ${formatUnit(days, "Day")}`;
 
 export const DaysFilter = ({ onChanged }: DaysFilterProps) => {
   const [isDateMenuOpen, setIsDateMenuOpen] = useState(false);
-  const [selectedDays, setSelectedDays] = useState<number>();
-  const [currentValue, setCurrentValue] = useState<number>();
-  const previousSelectedDays = usePrevious(selectedDays);
-  const handleSelectionChange = useCallback(
-    (days: number) => {
-      const value = selectedDays === days ? undefined : days;
-      setSelectedDays(value);
-      setCurrentValue(value);
-      setIsDateMenuOpen(false);
-    },
-    [selectedDays]
+  const [selectedDays, setSelectedDays] = useState<number>(
+    DAYS_FILTER_DEFAULT_VALUE
   );
+  const [currentValue, setCurrentValue] = useState<number | undefined>();
+  const previousSelectedDays = usePrevious(selectedDays);
+  const handleSelectionChange = useCallback((days: number) => {
+    setSelectedDays(days);
+    setCurrentValue(days);
+    setIsDateMenuOpen(false);
+  }, []);
 
   const daysFilterMenuItems = useMemo(
     () =>
@@ -48,11 +47,11 @@ export const DaysFilter = ({ onChanged }: DaysFilterProps) => {
 
   useEffect(() => {
     if (previousSelectedDays !== selectedDays) {
-      onChanged(selectedDays);
+      onChanged(selectedDays ?? DAYS_FILTER_DEFAULT_VALUE);
     }
   }, [selectedDays, previousSelectedDays, onChanged]);
 
-  const handleSortingMenuButtonClick = () => {
+  const handleMenuButtonClick = () => {
     sendUserActionTrackingEvent(
       trackingEvents.GLOBAL_ERRORS_VIEW_DATES_FILTERS_CHANGE
     );
@@ -67,7 +66,7 @@ export const DaysFilter = ({ onChanged }: DaysFilterProps) => {
       !newValue || Number.isNaN(intValue)
         ? undefined
         : intValue > MAX_VALUE
-        ? selectedDays
+        ? currentValue
         : intValue;
 
     sendUserActionTrackingEvent(
@@ -101,7 +100,12 @@ export const DaysFilter = ({ onChanged }: DaysFilterProps) => {
     sendUserActionTrackingEvent(
       trackingEvents.GLOBAL_ERRORS_DAYS_FILTER_APPLY_BTN_CLICKED
     );
-    setSelectedDays(currentValue);
+
+    if (!currentValue) {
+      setCurrentValue(DAYS_FILTER_DEFAULT_VALUE);
+    } else {
+      setSelectedDays(currentValue);
+    }
     setIsDateMenuOpen(false);
   };
 
@@ -117,16 +121,19 @@ export const DaysFilter = ({ onChanged }: DaysFilterProps) => {
               <s.Counter>
                 <NewIconButton
                   buttonType="secondaryBorderless"
-                  icon={() => <MinusIcon size={16} />}
+                  icon={() => <MinusIcon size={16} color="currentColor" />}
                   onClick={handleDecrement}
                 />
                 <s.CounterInput
                   onChange={handleCounterInputChange}
-                  value={currentValue?.toString() ?? ""}
+                  $isActive={Boolean(
+                    selectedDays && !DEFAULT_LIST_OPTIONS.includes(selectedDays)
+                  )}
+                  value={currentValue?.toString()}
                 />
                 <NewIconButton
                   buttonType="secondaryBorderless"
-                  icon={() => <PlusIcon size={16} />}
+                  icon={() => <PlusIcon size={16} color="currentColor" />}
                   onClick={handleIncrement}
                 />
                 <s.Text>Last days</s.Text>
@@ -151,7 +158,7 @@ export const DaysFilter = ({ onChanged }: DaysFilterProps) => {
         )}
         label={selectedDays ? getOptionLabel(selectedDays) : "Dates"}
         buttonType={"secondary"}
-        onClick={handleSortingMenuButtonClick}
+        onClick={handleMenuButtonClick}
       />
     </NewPopover>
   );

src/components/Errors/GlobalErrorsList/DaysFilter/styles.ts

@@ -1,12 +1,12 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import {
   bodyRegularTypography,
   footnoteRegularTypography
 } from "../../../common/App/typographies";
 import { NewButton } from "../../../common/v3/NewButton";
 import { TextField } from "../../../common/v3/TextField";
 import { Popup } from "../../../Navigation/common/Popup";
-import { DaysButtonProps } from "./types";
+import { CounterInputProps, DaysButtonProps } from "./types";
 
 export const ButtonIconContainer = styled.div`
   color: ${({ theme }) => theme.colors.v3.icon.tertiary};
@@ -57,12 +57,27 @@ export const Counter = styled.div`
   align-items: center;
 `;
 
-export const CounterInput = styled(TextField)`
+export const CounterInput = styled(TextField)<CounterInputProps>`
   ${footnoteRegularTypography}
   padding: 4px;
+  ${({ theme, $isActive }) =>
+    $isActive
+      ? css`
+          color: ${theme.colors.v3.text.link};
+          border: 1px solid ${theme.colors.v3.surface.brandPrimary};
+        `
+      : undefined};
 
   input {
     max-width: 16px;
+    text-align: center;
+
+    ${({ theme, $isActive }) =>
+      $isActive
+        ? css`
+            color: ${theme.colors.v3.text.link};
+          `
+        : undefined};
   }
 `;
 

src/components/Errors/GlobalErrorsList/DaysFilter/types.ts

@@ -31,3 +31,7 @@ export interface DaysButtonProps extends ButtonProps {
 export interface DaysFilterProps {
   onChanged: (days?: number) => void;
 }
+
+export interface CounterInputProps {
+  $isActive: boolean;
+}

src/store/errors/errorsSlice.ts

@@ -6,6 +6,7 @@ import {
 } from "../../components/Errors/GlobalErrorsList/types";
 
 export const PAGE_SIZE = 10;
+export const DAYS_FILTER_DEFAULT_VALUE = 7;
 
 export enum GLOBAL_ERROR_SORTING_CRITERION {
   CRITICALITY = "Criticality",
@@ -72,7 +73,8 @@ export const globalErrorsInitialState = {
     errorTypes: null
   },
   globalErrorsViewMode: ViewMode.All,
-  globalErrorsSelectedFilters: selectedFiltersInitialState
+  globalErrorsSelectedFilters: selectedFiltersInitialState,
+  globalErrorsLastDays: DAYS_FILTER_DEFAULT_VALUE
 };
 
 export const initialState: ErrorsState = {