From 0a478dc9d18f51bf1304335ae3cefb8a57ee8d02 Mon Sep 17 00:00:00 2001
From: Vladimir Khvan <vladimirkhvan23@gmail.com>
Date: Tue, 28 Mar 2023 14:35:50 +0500
Subject: [PATCH] filter dialog was added

---
 .../sub-components/HistoryFilterHeader.js     | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryFilterHeader.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryFilterHeader.js
index ee5ec2916e..3a20890849 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryFilterHeader.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryFilterHeader.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 
 import { Base } from "@docspace/components/themes";
@@ -6,6 +6,7 @@ import FilterReactSvrUrl from "PUBLIC_DIR/images/filter.react.svg?url";
 import IconButton from "@docspace/components/icon-button";
 
 import { useParams } from "react-router-dom";
+import { FilterDialog } from "./FilterDialog";
 
 const ListHeader = styled.header`
   display: flex;
@@ -51,13 +52,29 @@ const FilterButton = styled.div`
 const HistoryFilterHeader = () => {
   const { id } = useParams();
 
+  const [isFiltersVisible, setIsFiltersVisible] = useState(false);
+
+  const openFiltersModal = () => {
+    setIsFiltersVisible(true);
+  };
+
+  const closeFiltersModal = () => {
+    setIsFiltersVisible(false);
+  };
+
   return (
     <ListHeader>
       <ListHeading>Webhook {id}</ListHeading>
 
-      <FilterButton>
+      <FilterButton onClick={openFiltersModal}>
         <IconButton iconName={FilterReactSvrUrl} size={16} />
       </FilterButton>
+
+      <FilterDialog
+        visible={isFiltersVisible}
+        closeModal={closeFiltersModal}
+        applyFilters={() => {}}
+      />
     </ListHeader>
   );
 };