feat(chat): add new application type filters (Issue #2996)

apps/chat/src/components/Marketplace/MarketplaceFilterbar.tsx

@@ -26,7 +26,6 @@ import {
   ENTITY_TYPES,
   FilterTypes,
   MarketplaceTabs,
-  SOURCE_TYPES,
 } from '@/src/constants/marketplace';
 
 import Tooltip from '../Common/Tooltip';
@@ -189,6 +188,7 @@ export const MarketplaceFilterbar = () => {
   const selectedTab = useAppSelector(MarketplaceSelectors.selectSelectedTab);
 
   const topics = useAppSelector(ModelsSelectors.selectModelTopics);
+  const sourceTypes = useAppSelector(MarketplaceSelectors.selectSourceTypes);
 
   const [openedSections, setOpenedSections] = useState({
     [FilterTypes.ENTITY_TYPE]: true,
@@ -276,15 +276,17 @@ export const MarketplaceFilterbar = () => {
             onToggleFilterSection={handleToggleFilterSection}
             onApplyFilter={handleApplyFilter}
           />
-          <FilterSection
-            sectionName={t('Sources')}
-            filterValues={SOURCE_TYPES}
-            openedSections={openedSections}
-            selectedFilters={selectedFilters}
-            filterType={FilterTypes.SOURCES}
-            onToggleFilterSection={handleToggleFilterSection}
-            onApplyFilter={handleApplyFilter}
-          />
+          {sourceTypes.length > 1 && (
+            <FilterSection
+              sectionName={t('Sources')}
+              filterValues={sourceTypes}
+              openedSections={openedSections}
+              selectedFilters={selectedFilters}
+              filterType={FilterTypes.SOURCES}
+              onToggleFilterSection={handleToggleFilterSection}
+              onApplyFilter={handleApplyFilter}
+            />
+          )}
         </div>
       )}
     </nav>

apps/chat/src/components/Marketplace/TabRenderer.tsx

@@ -12,13 +12,18 @@ import { getFolderIdFromEntityId } from '@/src/utils/app/folders';
 import { isMyApplication } from '@/src/utils/app/id';
 import { doesEntityContainSearchTerm } from '@/src/utils/app/search';
 import { translate } from '@/src/utils/app/translation';
+import {
+  doesApplicationMatchFilters,
+  doesApplicationMatchSearchTerm,
+} from '@/src/utils/marketplace';
 import { ApiUtils } from '@/src/utils/server/api';
 
 import {
   ApplicationActionType,
   ApplicationType,
 } from '@/src/types/applications';
 import { ScreenState } from '@/src/types/common';
+import { MarketplaceFilters } from '@/src/types/marketplace';
 import { DialAIEntityModel } from '@/src/types/models';
 import { SharingType } from '@/src/types/share';
 import { Translation } from '@/src/types/translation';
@@ -266,31 +271,8 @@ export const TabRenderer = ({ screenState }: TabRendererProps) => {
   const displayedEntities = useMemo(() => {
     const filteredEntities = allModels.filter(
       (entity) =>
-        (doesEntityContainSearchTerm(entity, searchTerm) ||
-          (entity.version &&
-            doesEntityContainSearchTerm(
-              { name: entity.version },
-              searchTerm,
-            ))) &&
-        (selectedFilters[FilterTypes.ENTITY_TYPE].length
-          ? selectedFilters[FilterTypes.ENTITY_TYPE].includes(entity.type)
-          : true) &&
-        (selectedFilters[FilterTypes.TOPICS].length
-          ? intersection(selectedFilters[FilterTypes.TOPICS], entity.topics)
-              .length
-          : true) &&
-        (selectedFilters[FilterTypes.SOURCES].length
-          ? (selectedFilters[FilterTypes.SOURCES].includes(
-              SourceType.SharedWithMe,
-            ) &&
-              entity.sharedWithMe) ||
-            (selectedFilters[FilterTypes.SOURCES].includes(
-              SourceType.CreatedByMe,
-            ) &&
-              isMyApplication(entity)) ||
-            (selectedFilters[FilterTypes.SOURCES].includes(SourceType.Public) &&
-              isApplicationPublic(entity))
-          : true),
+        doesApplicationMatchSearchTerm(entity, searchTerm) &&
+        doesApplicationMatchFilters(entity, selectedFilters),
     );
 
     const isInstalledModel = (entity: DialAIEntityModel) =>

apps/chat/src/constants/marketplace.ts

@@ -37,11 +37,15 @@ export const ENTITY_TYPES = [
 export enum SourceType {
   Public = 'Public',
   SharedWithMe = 'Shared with me',
-  CreatedByMe = 'Created by me',
+  MyCustomApps = 'My Custom Apps',
+  MyQuickApps = 'My Quick Apps',
+  MyCodeApps = 'My Code Apps',
 }
 
-export const SOURCE_TYPES = [
-  SourceType.Public,
-  SourceType.SharedWithMe,
-  SourceType.CreatedByMe,
-];
+export const SourceTypeOrder = {
+  [SourceType.Public]: 1,
+  [SourceType.SharedWithMe]: 2,
+  [SourceType.MyCustomApps]: 3,
+  [SourceType.MyQuickApps]: 4,
+  [SourceType.MyCodeApps]: 5,
+};

apps/chat/src/store/marketplace/marketplace.epics.ts

@@ -10,13 +10,16 @@ import {
   FilterTypes,
   MarketplaceQueryParams,
   MarketplaceTabs,
-  SOURCE_TYPES,
   SourceType,
 } from '@/src/constants/marketplace';
 
 import { ModelsSelectors } from '../models/models.reducers';
 import { UIActions } from '../ui/ui.reducers';
-import { MarketplaceActions, MarketplaceState } from './marketplace.reducers';
+import {
+  MarketplaceActions,
+  MarketplaceSelectors,
+  MarketplaceState,
+} from './marketplace.reducers';
 import {
   selectDetailsModel,
   selectSearchTerm,
@@ -142,10 +145,10 @@ const initQueryParamsEpic: AppEpic = (action$, state$) =>
       const types = ((query[MarketplaceQueryParams.types] as string) ?? '')
         .split(',')
         .filter((type) => type && ENTITY_TYPES.includes(type as EntityType));
-
+      const sourceTypes = MarketplaceSelectors.selectSourceTypes(state);
       const sources = ((query[MarketplaceQueryParams.sources] as string) ?? '')
         .split(',')
-        .filter((type) => type && SOURCE_TYPES.includes(type as SourceType));
+        .filter((type) => type && sourceTypes.includes(type as SourceType));
 
       updatedMarketplaceState.selectedFilters = {
         [FilterTypes.ENTITY_TYPE]: types,

apps/chat/src/store/marketplace/marketplace.selectors.ts

@@ -1,6 +1,20 @@
+import { b } from 'vitest/dist/suite-IbNSsUWN';
+
 import { createSelector } from '@reduxjs/toolkit';
 
+import {
+  isApplicationPublic,
+  isExecutableApp,
+  isQuickApp,
+} from '@/src/utils/app/application';
+import { isMyApplication } from '@/src/utils/app/id';
+
+import { DialAIEntityModel } from '@/src/types/models';
+
+import { SourceType, SourceTypeOrder } from '@/src/constants/marketplace';
+
 import { RootState } from '../index';
+import { ModelsSelectors } from '../models/models.reducers';
 import { MarketplaceState } from './marketplace.reducers';
 
 import { UploadStatus } from '@epam/ai-dial-shared';
@@ -43,3 +57,28 @@ export const selectDetailsModel = createSelector(
   [rootSelector],
   (state) => state.detailsModel,
 );
+
+export const selectSourceTypes = createSelector(
+  [ModelsSelectors.selectModels],
+  (models: DialAIEntityModel[]) => {
+    const sourceTypes = new Set<SourceType>([SourceType.Public]);
+
+    models.forEach((model) => {
+      if (isMyApplication(model)) {
+        if (isQuickApp(model)) {
+          sourceTypes.add(SourceType.MyQuickApps);
+        } else if (isExecutableApp(model)) {
+          sourceTypes.add(SourceType.MyCodeApps);
+        } else {
+          sourceTypes.add(SourceType.MyCustomApps);
+        }
+      } else if (!isApplicationPublic(model)) {
+        sourceTypes.add(SourceType.SharedWithMe);
+      }
+    });
+
+    return Array.from(sourceTypes).sort(
+      (a, b) => SourceTypeOrder[a] - SourceTypeOrder[b],
+    );
+  },
+);

apps/chat/src/utils/marketplace.ts

@@ -0,0 +1,67 @@
+import {
+  isApplicationPublic,
+  isExecutableApp,
+  isQuickApp,
+} from '@/src/utils/app/application';
+import { isMyApplication } from '@/src/utils/app/id';
+import { doesEntityContainSearchTerm } from '@/src/utils/app/search';
+
+import { MarketplaceFilters } from '@/src/types/marketplace';
+import { DialAIEntityModel } from '@/src/types/models';
+
+import { FilterTypes, SourceType } from '@/src/constants/marketplace';
+
+import intersection from 'lodash-es/intersection';
+
+export const doesApplicationMatchSearchTerm = (
+  model: DialAIEntityModel,
+  searchTerm: string,
+) => {
+  return (
+    doesEntityContainSearchTerm(model, searchTerm) ||
+    (model.version &&
+      doesEntityContainSearchTerm({ name: model.version }, searchTerm))
+  );
+};
+
+export const doesApplicationMatchFilters = (
+  model: DialAIEntityModel,
+  selectedFilters: MarketplaceFilters,
+) => {
+  if (
+    selectedFilters[FilterTypes.ENTITY_TYPE].length &&
+    !selectedFilters[FilterTypes.ENTITY_TYPE].includes(model.type)
+  ) {
+    return false;
+  }
+
+  if (
+    selectedFilters[FilterTypes.TOPICS].length &&
+    !intersection(selectedFilters[FilterTypes.TOPICS], model.topics).length
+  ) {
+    return false;
+  }
+
+  if (selectedFilters[FilterTypes.SOURCES].length) {
+    const sources = selectedFilters[FilterTypes.SOURCES];
+    if (
+      (sources.includes(SourceType.Public) && isApplicationPublic(model)) ||
+      (sources.includes(SourceType.SharedWithMe) && model.sharedWithMe) ||
+      (sources.includes(SourceType.MyQuickApps) &&
+        isMyApplication(model) &&
+        isQuickApp(model)) ||
+      (sources.includes(SourceType.MyCodeApps) &&
+        isMyApplication(model) &&
+        isExecutableApp(model)) ||
+      (sources.includes(SourceType.MyCustomApps) &&
+        isMyApplication(model) &&
+        !isExecutableApp(model) &&
+        !isQuickApp(model))
+    ) {
+      return true;
+    }
+    return false;
+  }
+
+  return true;
+};