section header was hidden in webhook details/ webhooks history

packages/client/src/pages/PortalSettings/Layout/index.js

@@ -26,6 +26,7 @@ const Layout = ({
   language,
   children,
   addUsers,
+  isTitleVisible,
 }) => {
   useEffect(() => {
     currentProductId !== "settings" && setCurrentProductId("settings");
@@ -35,9 +36,12 @@ const Layout = ({
     <>
       <ArticleSettings />
       <Section withBodyScroll={true} settingsStudio={true}>
-        <Section.SectionHeader>
-          <SectionHeaderContent />
-        </Section.SectionHeader>
+        {/* <Section.SectionHeader>{isTitleVisible && <SectionHeaderContent />}</Section.SectionHeader> */}
+        {isTitleVisible && (
+          <Section.SectionHeader>
+            <SectionHeaderContent />
+          </Section.SectionHeader>
+        )}
 
         <Section.SectionBody>{children}</Section.SectionBody>
         {addUsers && (
@@ -50,13 +54,15 @@ const Layout = ({
   );
 };
 
-export default inject(({ auth, setup }) => {
+export default inject(({ auth, setup, webhooksStore }) => {
   const { language, settingsStore } = auth;
   const { addUsers } = setup.headerAction;
+  const { isTitleVisible } = webhooksStore;
 
   return {
     language,
     setCurrentProductId: settingsStore.setCurrentProductId,
     addUsers,
+    isTitleVisible,
   };
 })(withLoading(observer(Layout)));

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/index.js

@@ -20,7 +20,7 @@ const EventDetailsHeader = styled.header`
 `;
 
 const WebhookEventDetails = (props) => {
-  const { getWebhookHistory } = props;
+  const { getWebhookHistory, hideTitle, showTitle } = props;
 
   const { id, eventId } = useParams();
 
@@ -29,11 +29,13 @@ const WebhookEventDetails = (props) => {
   const [webhookDetails, setWebhookDetails] = useState({});
 
   useEffect(() => {
+    hideTitle();
     (async () => {
       const [webhookDetailsData] = await getWebhookHistory({ eventId });
       setWebhookDetails(webhookDetailsData);
       setIsLoading(false);
     })();
+    return showTitle;
   }, []);
 
   return (
@@ -55,7 +57,7 @@ const WebhookEventDetails = (props) => {
 };
 
 export default inject(({ webhooksStore }) => {
-  const { getWebhookHistory } = webhooksStore;
+  const { getWebhookHistory, hideTitle, showTitle } = webhooksStore;
 
-  return { getWebhookHistory };
+  return { getWebhookHistory, hideTitle, showTitle };
 })(observer(WebhookEventDetails));

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/DetailsNavigationHeader.js

@@ -20,6 +20,7 @@ const HeaderContainer = styled.div`
   display: flex;
   align-items: center;
   max-width: calc(100vw - 32px);
+  min-height: 69px;
 
   .arrow-button {
     margin-right: 18.5px;

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

@@ -16,7 +16,7 @@ const WebhookWrapper = styled.div`
 `;
 
 const WebhookHistory = (props) => {
-  const { getWebhookHistory } = props;
+  const { getWebhookHistory, hideTitle, showTitle, emptyCheckedIds } = props;
 
   const [isLoading, setIsLoading] = useState(true);
   const [statusFilters, setStatusFilters] = useState(null);
@@ -24,14 +24,17 @@ const WebhookHistory = (props) => {
   const { id } = useParams();
 
   useEffect(() => {
+    hideTitle();
     (async () => {
       const webhookHistoryData = await getWebhookHistory({ configId: id });
       setHistoryWebhooks(webhookHistoryData);
       setIsLoading(false);
     })();
+    return showTitle;
   }, []);
 
   const applyFilters = async ({ deliveryFrom, deliveryTo, groupStatus }) => {
+    emptyCheckedIds();
     const params = { configId: id, deliveryFrom, deliveryTo, groupStatus };
 
     const webhookHistoryData = await getWebhookHistory(params);
@@ -64,7 +67,7 @@ const WebhookHistory = (props) => {
 };
 
 export default inject(({ webhooksStore }) => {
-  const { getWebhookHistory } = webhooksStore;
+  const { getWebhookHistory, hideTitle, showTitle, emptyCheckedIds } = webhooksStore;
 
-  return { getWebhookHistory };
+  return { getWebhookHistory, hideTitle, showTitle, emptyCheckedIds };
 })(observer(WebhookHistory));

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

@@ -20,7 +20,8 @@ const HeaderContainer = styled.div`
   position: relative;
   display: flex;
   align-items: center;
-  max-width: calc(100vw - 32px);
+  width: 100vw;
+  min-height: 69px;
   height: 69px;
 
   .arrow-button {
@@ -41,10 +42,10 @@ const HeaderContainer = styled.div`
     margin: 0 0 0 -20px;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
-    width: calc(100% + 40px);
-    height: 68px;
+    width: 100%;
+    height: 69px;
 
-    @media ${tablet} {
+    /* @media ${tablet} {
       height: 60px;
       margin: 0 0 0 -16px;
       width: calc(100% + 32px);
@@ -68,7 +69,7 @@ const HeaderContainer = styled.div`
       height: 52px;
       margin: 0 0 0 -16px;
       width: calc(100% + 32px);
-    `}
+    `} */
   }
 `;
 

packages/client/src/store/WebhooksStore.js

@@ -21,6 +21,7 @@ class WebhooksStore {
     status: [],
   };
   checkedEventIds = [];
+  isTitleVisible = true;
 
   constructor() {
     makeAutoObservable(this);
@@ -199,6 +200,13 @@ class WebhooksStore {
   get isHeaderVisible() {
     return this.checkedEventIds.length !== 0;
   }
+
+  hideTitle = () => {
+    this.isTitleVisible = false;
+  };
+  showTitle = () => {
+    this.isTitleVisible = true;
+  };
 }
 
 export default WebhooksStore;