[8.12] [Fleet] Fix categories labels in integration overview (#176141) (#176157)

# Backport

This will backport the following commits from `main` to `8.12`:
- [[Fleet] Fix categories labels in integration overview
(#176141)](https://github.com/elastic/kibana/pull/176141)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Cristina
Amico","email":"criamico@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-02-02T14:19:39Z","message":"[Fleet]
Fix categories labels in integration overview (#176141)\n\nCloses
https://github.com/elastic/kibana/issues/176031\r\n\r\n##
Summary\r\n\r\nFixing missing category label in Integration overwiew
page for\r\nsubintegrations. The category label was just showing the
parent\r\nIntegration label but not the own category. To fix it, I'm
adding the\r\ncategories in `integrationInfo` as well.\r\n\r\n###
Before\r\n![Screenshot 2024-02-02 at 12
37\r\n01](5170bb5d-fce3-400c-b6a5-3e39003f4158)\r\n\r\n\r\n###
After\r\n![Screenshot 2024-02-02 at 12
33\r\n06](14d475c8-ab02-4d50-883f-80924cd96b93)","sha":"e9dc10e97d0b0e89fe70ef4ff148e83e3f2e3c90","branchLabelMapping":{"^v8.13.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Fleet","backport:prev-minor","v8.13.0"],"title":"[Fleet]
Fix categories labels in integration
overview","number":176141,"url":"https://github.com/elastic/kibana/pull/176141","mergeCommit":{"message":"[Fleet]
Fix categories labels in integration overview (#176141)\n\nCloses
https://github.com/elastic/kibana/issues/176031\r\n\r\n##
Summary\r\n\r\nFixing missing category label in Integration overwiew
page for\r\nsubintegrations. The category label was just showing the
parent\r\nIntegration label but not the own category. To fix it, I'm
adding the\r\ncategories in `integrationInfo` as well.\r\n\r\n###
Before\r\n![Screenshot 2024-02-02 at 12
37\r\n01](5170bb5d-fce3-400c-b6a5-3e39003f4158)\r\n\r\n\r\n###
After\r\n![Screenshot 2024-02-02 at 12
33\r\n06](14d475c8-ab02-4d50-883f-80924cd96b93)","sha":"e9dc10e97d0b0e89fe70ef4ff148e83e3f2e3c90"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.13.0","branchLabelMappingKey":"^v8.13.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/176141","number":176141,"mergeCommit":{"message":"[Fleet]
Fix categories labels in integration overview (#176141)\n\nCloses
https://github.com/elastic/kibana/issues/176031\r\n\r\n##
Summary\r\n\r\nFixing missing category label in Integration overwiew
page for\r\nsubintegrations. The category label was just showing the
parent\r\nIntegration label but not the own category. To fix it, I'm
adding the\r\ncategories in `integrationInfo` as well.\r\n\r\n###
Before\r\n![Screenshot 2024-02-02 at 12
37\r\n01](5170bb5d-fce3-400c-b6a5-3e39003f4158)\r\n\r\n\r\n###
After\r\n![Screenshot 2024-02-02 at 12
33\r\n06](14d475c8-ab02-4d50-883f-80924cd96b93)","sha":"e9dc10e97d0b0e89fe70ef4ff148e83e3f2e3c90"}}]}]
BACKPORT-->

Co-authored-by: Cristina Amico <criamico@users.noreply.github.com>

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/overview/details.tsx

@@ -21,12 +21,15 @@ import {
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
 
 import { withSuspense, LazyReplacementCard } from '@kbn/custom-integrations-plugin/public';
+import { uniq } from 'lodash';
 
 import type {
   PackageInfo,
   PackageSpecCategory,
   AssetTypeToParts,
   KibanaAssetType,
+  RegistryPolicyTemplate,
+  RegistryPolicyIntegrationTemplate,
 } from '../../../../../types';
 import { entries } from '../../../../../types';
 import { useGetCategoriesQuery } from '../../../../../hooks';
@@ -41,6 +44,7 @@ const ReplacementCard = withSuspense(LazyReplacementCard);
 
 interface Props {
   packageInfo: PackageInfo;
+  integrationInfo?: RegistryPolicyTemplate;
 }
 
 const Replacements = euiStyled(EuiFlexItem)`
@@ -60,16 +64,32 @@ const Replacements = euiStyled(EuiFlexItem)`
   }
 `;
 
-export const Details: React.FC<Props> = memo(({ packageInfo }) => {
+export const Details: React.FC<Props> = memo(({ packageInfo, integrationInfo }) => {
   const { data: categoriesData, isLoading: isLoadingCategories } = useGetCategoriesQuery();
+
+  const mergedCategories: Array<string | undefined> = useMemo(() => {
+    let allCategories: Array<string | undefined> = [];
+
+    if (packageInfo?.categories) {
+      allCategories = packageInfo.categories;
+    }
+    if ((integrationInfo as RegistryPolicyIntegrationTemplate)?.categories) {
+      allCategories = uniq([
+        ...allCategories,
+        ...((integrationInfo as RegistryPolicyIntegrationTemplate)?.categories || []),
+      ]);
+    }
+    return allCategories;
+  }, [integrationInfo, packageInfo?.categories]);
+
   const packageCategories: string[] = useMemo(() => {
     if (!isLoadingCategories && categoriesData?.items) {
       return categoriesData.items
-        .filter((category) => packageInfo.categories?.includes(category.id as PackageSpecCategory))
+        .filter((category) => mergedCategories?.includes(category.id as PackageSpecCategory))
         .map((category) => category.title);
     }
     return [];
-  }, [categoriesData, isLoadingCategories, packageInfo.categories]);
+  }, [categoriesData, isLoadingCategories, mergedCategories]);
 
   const [isNoticeModalOpen, setIsNoticeModalOpen] = useState(false);
   const toggleNoticeModal = useCallback(() => {

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/overview/overview.tsx

@@ -328,7 +328,7 @@ export const OverviewPage: React.FC<Props> = memo(
               </EuiFlexItem>
             ) : null}
             <EuiFlexItem className="eui-textBreakWord">
-              <Details packageInfo={packageInfo} />
+              <Details packageInfo={packageInfo} integrationInfo={integrationInfo} />
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>

x-pack/plugins/fleet/public/types/index.ts

@@ -138,6 +138,7 @@ export type {
   GetInputsTemplatesRequest,
   GetInputsTemplatesResponse,
   BulkGetAgentPoliciesResponse,
+  RegistryPolicyIntegrationTemplate,
 } from '../../common/types';
 export {
   entries,