feat(console): hide m2m and third-party app in the empty app list guide (#5331)

* feat(console): hide m2m and third-party app in the empty app list guide

hide m2m and third-party app in the empty app status guide

* fix(test): fix integration tests

fix integration tests

packages/console/src/pages/Applications/components/GuideLibrary/index.tsx

@@ -50,6 +50,17 @@ function GuideLibrary({ className, hasCardBorder, hasCardButton }: Props) {
     [getFilteredAppGuideMetadata, keyword, filterCategories]
   );
 
+  // Only show third party app and machine to machine app in create modal. Hide them by default in the empty app guide page.
+  const fullApplicationCategories = useMemo(() => {
+    if (isApplicationCreateModal) {
+      return allAppGuideCategories;
+    }
+
+    return allAppGuideCategories.filter(
+      (category) => category !== thirdPartyAppCategory && category !== 'MachineToMachine'
+    );
+  }, [isApplicationCreateModal]);
+
   const onClickGuide = useCallback((data: SelectedGuide) => {
     setShowCreateForm(true);
     setSelectedGuide(data);
@@ -138,7 +149,7 @@ function GuideLibrary({ className, hasCardBorder, hasCardButton }: Props) {
                     className={styles.protectedAppCard}
                   />
                 )}
-              {(filterCategories.length > 0 ? filterCategories : allAppGuideCategories).map(
+              {(filterCategories.length > 0 ? filterCategories : fullApplicationCategories).map(
                 (category) =>
                   structuredMetadata[category].length > 0 && (
                     <GuideCardGroup

packages/integration-tests/src/tests/console/applications/helpers.ts

@@ -12,9 +12,18 @@ import { expectNavigation } from '#src/utils.js';
 
 import { frameworkGroupLabels, type ApplicationCase } from './constants.js';
 
-export const expectFrameworksInGroup = async (page: Page, groupSelector: string) => {
+export const expectFrameworksInGroup = async (
+  page: Page,
+  groupSelector: string,
+  isTablePlaceHolder = false
+) => {
   /* eslint-disable no-await-in-loop */
-  for (const groupLabel of frameworkGroupLabels) {
+  // Expect the framework group to be visible, Third-party and Machine-to-machine are not visible in table placeholder
+  for (const groupLabel of isTablePlaceHolder
+    ? frameworkGroupLabels.filter(
+        (label) => label !== 'Third-party' && label !== 'Machine-to-machine'
+      )
+    : frameworkGroupLabels) {
     const frameGroup = await expect(page).toMatchElement(groupSelector, {
       text: groupLabel,
     });

packages/integration-tests/src/tests/console/applications/index.test.ts

@@ -54,7 +54,7 @@ describe('applications', () => {
       { text: 'Select a framework or tutorial', timeout: 2000 }
     );
 
-    await expectFrameworksInGroup(page, 'div[class$=guideGroup]:has(>label)');
+    await expectFrameworksInGroup(page, 'div[class$=guideGroup]:has(>label)', true);
   });
 
   it('create the initial application from the table placeholder', async () => {