use queryparam initially, navigate to correct url

Author: parkiino

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/screens/home/index.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { useState } from 'react';
-import { useRouteMatch, Switch, Route } from 'react-router-dom';
+import { useRouteMatch, Switch, Route, useLocation, useHistory } from 'react-router-dom';
 import { Props as EuiTabProps } from '@elastic/eui/src/components/tabs/tab';
 import { i18n } from '@kbn/i18n';
 import { PAGE_ROUTING_PATHS } from '../../../../constants';
@@ -114,7 +114,11 @@ function InstalledPackages() {
 
 function AvailablePackages() {
   useBreadcrumbs('integrations_all');
-  const [selectedCategory, setSelectedCategory] = useState('');
+  const history = useHistory();
+  const queryParams = new URLSearchParams(useLocation().search);
+  const initialCategory =
+    queryParams.get('category') !== null ? (queryParams.get('category') as string) : '';
+  const [selectedCategory, setSelectedCategory] = useState(initialCategory);
   const { data: categoryPackagesRes, isLoading: isLoadingPackages } = useGetPackages({
     category: selectedCategory,
   });
@@ -141,7 +145,13 @@ function AvailablePackages() {
       isLoading={isLoadingCategories}
       categories={categories}
       selectedCategory={selectedCategory}
-      onCategoryChange={({ id }: CategorySummaryItem) => setSelectedCategory(id)}
+      onCategoryChange={({ id }: CategorySummaryItem) => {
+        // clear category query param in the url
+        if (queryParams.get('category') !== null) {
+          history.push({});
+        }
+        setSelectedCategory(id);
+      }}
     />
   ) : null;
 

x-pack/plugins/security_solution/public/overview/components/overview_empty/index.tsx

@@ -17,7 +17,7 @@ const OverviewEmptyComponent: React.FC = () => {
   const { http, docLinks } = useKibana().services;
   const basePath = http.basePath.get();
   const { appId: ingestAppId, appPath: ingestPath, url: ingestUrl } = useHostIngestUrl(
-    'integrations'
+    'integrations?category=security'
   );
   const handleOnClick = useNavigateToAppEventHandler(ingestAppId, { path: ingestPath });