corrected filter logic

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/DeliveryDatePicker.js

@@ -37,9 +37,16 @@ const StyledCalendar = styled(Calendar)`
     `}
 `;
 
-const DeliveryDatePicker = ({ Selectors, filters, setFilters, isApplied, setIsApplied }) => {
+const DeliveryDatePicker = ({
+  Selectors,
+  filters,
+  setFilters,
+  isApplied,
+  setIsApplied,
+  isTimeOpen,
+  setIsTimeOpen,
+}) => {
   const [isCalendarOpen, setIsCalendarOpen] = useState(false);
-  const [isTimeOpen, setIsTimeOpen] = useState(false);
 
   const { t } = useTranslation(["Webhooks"]);
 
@@ -99,11 +106,7 @@ const DeliveryDatePicker = ({ Selectors, filters, setFilters, isApplied, setIsAp
 
   const DateSelector = () => (
     <div>
-      <SelectorAddButton
-        title={t("Add")}
-        onClick={toggleCalendar}
-        style={{ marginRight: "8px" }}
-      />
+      <SelectorAddButton title={t("Add")} onClick={toggleCalendar} style={{ marginRight: "8px" }} />
       <Text isInline fontWeight={600} color="#A3A9AE">
         {t("SelectDate")}
       </Text>
@@ -148,11 +151,7 @@ const DeliveryDatePicker = ({ Selectors, filters, setFilters, isApplied, setIsAp
 
   const TimeSelectorAdder = () => (
     <TimePickerCell>
-      <SelectorAddButton
-        title={t("Add")}
-        onClick={showTimePicker}
-        style={{ marginRight: "8px" }}
-      />
+      <SelectorAddButton title={t("Add")} onClick={showTimePicker} style={{ marginRight: "8px" }} />
       <Text isInline fontWeight={600} color="#A3A9AE">
         {t("SelectDeliveryTime")}
       </Text>

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { inject, observer } from "mobx-react";
 import moment from "moment";
 
@@ -44,7 +44,8 @@ const Separator = styled.hr`
 Separator.defaultProps = { theme: Base };
 
 const FilterDialog = (props) => {
-  const { visible, closeModal, applyFilters, formatFilters, setHistoryFilters } = props;
+  const { visible, closeModal, applyFilters, formatFilters, setHistoryFilters, historyFilters } =
+    props;
   const { t } = useTranslation(["Webhooks", "Files", "Common"]);
 
   const [filters, setFilters] = useState({
@@ -55,6 +56,7 @@ const FilterDialog = (props) => {
   });
 
   const [isApplied, setIsApplied] = useState(false);
+  const [isTimeOpen, setIsTimeOpen] = useState(false);
 
   const handleApplyFilters = () => {
     if (filters.deliveryTo > filters.deliveryFrom) {
@@ -68,6 +70,22 @@ const FilterDialog = (props) => {
     }
   };
 
+  useEffect(() => {
+    console.log(historyFilters);
+    if (historyFilters === null && (filters.deliveryDate !== null || filters.status.length > 0)) {
+      setFilters({
+        deliveryDate: null,
+        deliveryFrom: moment().startOf("day"),
+        deliveryTo: moment().endOf("day"),
+        status: [],
+      });
+    } else if (historyFilters !== null) {
+      setFilters(historyFilters);
+      setIsTimeOpen(false);
+      setIsApplied(true);
+    }
+  }, [historyFilters, visible]);
+
   return (
     <ModalDialog withFooterBorder visible={visible} onClose={closeModal} displayType="aside">
       <ModalDialog.Header>{t("Files:Filter")}</ModalDialog.Header>
@@ -79,6 +97,8 @@ const FilterDialog = (props) => {
             setIsApplied={setIsApplied}
             filters={filters}
             setFilters={setFilters}
+            isTimeOpen={isTimeOpen}
+            setIsTimeOpen={setIsTimeOpen}
           />
           <Separator />
           <StatusPicker Selectors={Selectors} filters={filters} setFilters={setFilters} />
@@ -102,7 +122,7 @@ const FilterDialog = (props) => {
 };
 
 export default inject(({ webhooksStore }) => {
-  const { formatFilters, setHistoryFilters } = webhooksStore;
+  const { formatFilters, setHistoryFilters, historyFilters } = webhooksStore;
 
-  return { formatFilters, setHistoryFilters };
+  return { formatFilters, setHistoryFilters, historyFilters };
 })(observer(FilterDialog));

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryFilterHeader.js

@@ -51,7 +51,7 @@ const FilterButton = styled.div`
   width: 32px;
   height: 32px;
 
-  z-index: ${(props) => (props.isHeaderVisible ? 199 : 201)};
+  z-index: ${(props) => (props.isGroupMenuVisible ? 199 : 201)};
 
   border: 1px solid;
   border-color: ${(props) => (props.theme.isBase ? "#d0d5da" : "rgb(71, 71, 71)")};
@@ -86,7 +86,7 @@ const FilterButton = styled.div`
 FilterButton.defaultProps = { theme: Base };
 
 const HistoryFilterHeader = (props) => {
-  const { applyFilters, historyFilters, isHeaderVisible } = props;
+  const { applyFilters, historyFilters, isGroupMenuVisible } = props;
   const { t } = useTranslation(["Webhooks"]);
   const { id } = useParams();
 
@@ -107,7 +107,7 @@ const HistoryFilterHeader = (props) => {
           {t("Webhook")} {id}
         </ListHeading>
 
-        <FilterButton onClick={openFiltersModal} isHeaderVisible={isHeaderVisible}>
+        <FilterButton onClick={openFiltersModal} isGroupMenuVisible={isGroupMenuVisible}>
           <IconButton iconName={FilterReactSvrUrl} size={16} />
           <span hidden={historyFilters === null}></span>
         </FilterButton>
@@ -123,9 +123,9 @@ const HistoryFilterHeader = (props) => {
 };
 
 export default inject(({ webhooksStore }) => {
-  const { historyFilters, isHeaderVisible } = webhooksStore;
+  const { historyFilters, isGroupMenuVisible } = webhooksStore;
   return {
     historyFilters,
-    isHeaderVisible,
+    isGroupMenuVisible,
   };
 })(observer(HistoryFilterHeader));

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/StatusBar.js

@@ -110,15 +110,18 @@ const StatusBar = (props) => {
         ""
       )}
       {SelectedStatuses}
-      <Link
-        type="action"
-        fontWeight={600}
-        isHovered={true}
-        onClick={clearAll}
-        color="#A3A9AE"
-        className="statusActionItem">
-        Clear all
-      </Link>
+      {((historyFilters.deliveryDate !== null && historyFilters.status.length > 0) ||
+        historyFilters.status.length > 1) && (
+          <Link
+            type="action"
+            fontWeight={600}
+            isHovered={true}
+            onClick={clearAll}
+            color="#A3A9AE"
+            className="statusActionItem">
+            Clear all
+          </Link>
+        )}
     </StatusBarWrapper>
   );
 };