diff --git a/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx b/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx
index 84745c8ba..64904e358 100644
--- a/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx
+++ b/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx
@@ -15,7 +15,6 @@ interface Props {
fetchFilterSearch: (query: any) => void;
addFilterByKeyAndValue: (key: string, value: string) => void;
liveAddFilterByKeyAndValue: (key: string, value: string) => void;
- filterSearchList: any;
liveFetchFilterSearch: any;
}
function SessionSearchField(props: Props) {
diff --git a/frontend/app/components/shared/SessionSearchQueryParamHandler/SessionSearchQueryParamHandler.tsx b/frontend/app/components/shared/SessionSearchQueryParamHandler/SessionSearchQueryParamHandler.tsx
deleted file mode 100644
index e38729b2a..000000000
--- a/frontend/app/components/shared/SessionSearchQueryParamHandler/SessionSearchQueryParamHandler.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { useEffect } from 'react';
-import { useHistory } from 'react-router';
-import { connect } from 'react-redux';
-import { addFilterByKeyAndValue, addFilter } from 'Duck/search';
-import { updateFilter } from 'Duck/search';
-import { createUrlQuery, getFiltersFromQuery } from 'App/utils/search';
-
-interface Props {
- appliedFilter: any;
- updateFilter: any;
- addFilterByKeyAndValue: typeof addFilterByKeyAndValue;
- addFilter: typeof addFilter;
-}
-const SessionSearchQueryParamHandler = (props: Props) => {
- const { appliedFilter } = props;
- const history = useHistory();
-
- const applyFilterFromQuery = () => {
- const filter = getFiltersFromQuery(history.location.search, appliedFilter);
- props.updateFilter(filter, true, false);
- };
-
- const generateUrlQuery = () => {
- const search: any = createUrlQuery(appliedFilter);
- history.replace({ search });
- };
-
- useEffect(applyFilterFromQuery, []);
- useEffect(generateUrlQuery, [appliedFilter]);
-
- return <>;
-};
-
-export default connect(
- (state: any) => ({
- appliedFilter: state.getIn(['search', 'instance']),
- }),
- { addFilterByKeyAndValue, addFilter, updateFilter }
-)(SessionSearchQueryParamHandler);
diff --git a/frontend/app/components/shared/SessionSearchQueryParamHandler/index.ts b/frontend/app/components/shared/SessionSearchQueryParamHandler/index.ts
deleted file mode 100644
index c13bb493d..000000000
--- a/frontend/app/components/shared/SessionSearchQueryParamHandler/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SessionSearchQueryParamHandler';
\ No newline at end of file
diff --git a/frontend/app/hooks/useSessionSearchQueryHandler.ts b/frontend/app/hooks/useSessionSearchQueryHandler.ts
new file mode 100644
index 000000000..555914e49
--- /dev/null
+++ b/frontend/app/hooks/useSessionSearchQueryHandler.ts
@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import { useHistory } from 'react-router';
+import { createUrlQuery, getFiltersFromQuery } from 'App/utils/search';
+
+interface Props {
+ appliedFilter: any;
+ applyFilter: any;
+}
+
+const useSessionSearchQueryHandler = (props: Props) => {
+ const { appliedFilter, applyFilter } = props;
+ const history = useHistory();
+
+ useEffect(() => {
+ const applyFilterFromQuery = () => {
+ console.log('called...');
+ const filter = getFiltersFromQuery(history.location.search, appliedFilter);
+ applyFilter(filter, true, false);
+ };
+
+ applyFilterFromQuery();
+ }, []);
+
+ useEffect(() => {
+ const generateUrlQuery = () => {
+ const search: any = createUrlQuery(appliedFilter);
+ history.replace({ search });
+ };
+
+ generateUrlQuery();
+ }, [appliedFilter]);
+
+ return null;
+};
+
+export default useSessionSearchQueryHandler;
diff --git a/frontend/app/svg/ca-no-sessions-in-vault.svg b/frontend/app/svg/ca-no-sessions-in-vault.svg
index 69470f8f6..ef3e41f0e 100644
--- a/frontend/app/svg/ca-no-sessions-in-vault.svg
+++ b/frontend/app/svg/ca-no-sessions-in-vault.svg
@@ -1,72 +1,48 @@