@finos/legend-application-marketplace 0.2.3 → 0.2.4

package/src/components/AddToCart/RecommendedAddOnsModal.tsx

@@ -69,7 +69,9 @@ interface RecommendedAddOnsModalProps {
     selectedTerminal: TerminalResult,
     recommendations: TerminalResult[],
     responseMessage: string,
+    totalCount?: number | null,
   ) => void;
+  totalCount?: number | null | undefined;
 }
 
 const MAX_DISPLAY_ITEMS_COUNT = 10;
@@ -115,11 +117,12 @@ export const RecommendedAddOnsModal = observer(
       setShowModal,
       onViewCart,
       onTerminalSelected,
+      totalCount: initialTotalCount,
     } = props;
 
     const legendMarketplaceBaseStore = useLegendMarketplaceBaseStore();
     const applicationStore = legendMarketplaceBaseStore.applicationStore;
-    const currentUser = applicationStore.identityService.currentUser;
+    const cartUser = legendMarketplaceBaseStore.cartStore.cartUser;
 
     const [searchTerm, setSearchTerm] = useState('');
     const [sortOrder, setSortOrder] = useState<SortOrder | undefined>();
@@ -128,6 +131,9 @@ export const RecommendedAddOnsModal = observer(
     const [terminalSearchResults, setTerminalSearchResults] = useState<
       TerminalResult[] | undefined
     >(undefined);
+    const [searchTotalCount, setSearchTotalCount] = useState<
+      number | undefined
+    >(undefined);
     const [isSearching, setIsSearching] = useState(false);
     const [isAssociating, setIsAssociating] = useState(false);
     const [associatingItemId, setAssociatingItemId] = useState<
@@ -143,12 +149,16 @@ export const RecommendedAddOnsModal = observer(
       const hasCartItems = recommendedItems.some(
         (item) => item.source === RecommendationSource.CART,
       );
+      const hasInventoryItems = recommendedItems.some(
+        (item) => item.source === RecommendationSource.INVENTORY,
+      );
       const hasMarketplaceItems = recommendedItems.some(
-        (item) =>
-          item.source === RecommendationSource.MARKETPLACE ||
-          item.source === RecommendationSource.INVENTORY,
+        (item) => item.source === RecommendationSource.MARKETPLACE,
+      );
+      return (
+        [hasCartItems, hasInventoryItems, hasMarketplaceItems].filter(Boolean)
+          .length >= 2
       );
-      return hasCartItems && hasMarketplaceItems;
     }, [recommendedItems]);
 
     const cartSourceItems = useMemo(
@@ -158,12 +168,17 @@ export const RecommendedAddOnsModal = observer(
         ),
       [recommendedItems],
     );
+    const inventorySourceItems = useMemo(
+      () =>
+        recommendedItems.filter(
+          (item) => item.source === RecommendationSource.INVENTORY,
+        ),
+      [recommendedItems],
+    );
     const marketplaceSourceItems = useMemo(
       () =>
         recommendedItems.filter(
-          (item) =>
-            item.source === RecommendationSource.MARKETPLACE ||
-            item.source === RecommendationSource.INVENTORY,
+          (item) => item.source === RecommendationSource.MARKETPLACE,
         ),
       [recommendedItems],
     );
@@ -181,7 +196,7 @@ export const RecommendedAddOnsModal = observer(
         try {
           const response =
             await legendMarketplaceBaseStore.marketplaceServerClient.searchVendorAddons(
-              currentUser,
+              cartUser,
               terminal.providerName,
               {
                 // SERVER_SEARCH_PAGE_SIZE is set high enough to cover all expected results and paginate client-side.
@@ -196,6 +211,7 @@ export const RecommendedAddOnsModal = observer(
             setTerminalSearchResults(
               response.marketplace_addons as TerminalResult[],
             );
+            setSearchTotalCount(response.total_count as number | undefined);
           }
         } catch (error) {
           assertErrorThrown(error);
@@ -218,7 +234,7 @@ export const RecommendedAddOnsModal = observer(
       [
         terminal,
         isTerminalAdded,
-        currentUser,
+        cartUser,
         legendMarketplaceBaseStore.marketplaceServerClient,
         applicationStore.logService,
       ],
@@ -232,6 +248,7 @@ export const RecommendedAddOnsModal = observer(
 
         if (!isTerminalAdded || !query.trim()) {
           setTerminalSearchResults(undefined);
+          setSearchTotalCount(undefined);
           setIsSearching(false);
           return;
         }
@@ -300,6 +317,7 @@ export const RecommendedAddOnsModal = observer(
       setSortOrder(undefined);
       setCurrentPage(1);
       setTerminalSearchResults(undefined);
+      setSearchTotalCount(undefined);
       setIsSearching(false);
       setIsAssociating(false);
       setAssociatingItemId(undefined);
@@ -336,6 +354,7 @@ export const RecommendedAddOnsModal = observer(
                 selectedTerminal,
                 result.recommendations,
                 result.message,
+                result.totalCount,
               );
             } else {
               closeModal();
@@ -526,6 +545,45 @@ export const RecommendedAddOnsModal = observer(
               )}
 
               {cartSourceItems.length > 0 &&
+                (inventorySourceItems.length > 0 ||
+                  marketplaceSourceItems.length > 0) && (
+                  <Divider sx={{ my: 2 }} />
+                )}
+
+              {inventorySourceItems.length > 0 && (
+                <Box className="recommended-addons-modal__source-section">
+                  <Box className="recommended-addons-modal__source-header">
+                    <Typography
+                      variant="h6"
+                      className="recommended-addons-modal__source-title"
+                    >
+                      From Your Inventory
+                    </Typography>
+                    <Typography
+                      variant="body2"
+                      className="recommended-addons-modal__source-description"
+                    >
+                      Select a terminal from your existing inventory to
+                      associate
+                    </Typography>
+                  </Box>
+                  <Box className="recommended-addons-modal__list">
+                    <ListHeader headerName={headerName} />
+                    {inventorySourceItems.map((item) => (
+                      <RecommendedItemsCard
+                        key={item.id}
+                        recommendedItem={item}
+                        onSelect={handleAssociateTerminal}
+                        isSelecting={isAssociating}
+                        selectedItemId={associatingItemId}
+                      />
+                    ))}
+                  </Box>
+                </Box>
+              )}
+
+              {(cartSourceItems.length > 0 ||
+                inventorySourceItems.length > 0) &&
                 marketplaceSourceItems.length > 0 && <Divider sx={{ my: 2 }} />}
 
               {marketplaceSourceItems.length > 0 && (
@@ -576,6 +634,7 @@ export const RecommendedAddOnsModal = observer(
                     setCurrentPage(1);
                     if (!e.target.value.trim()) {
                       setTerminalSearchResults(undefined);
+                      setSearchTotalCount(undefined);
                       setIsSearching(false);
                       abortControllerRef.current?.abort();
                     }
@@ -705,24 +764,27 @@ export const RecommendedAddOnsModal = observer(
                         currentPage * itemsPerPage,
                         filteredAndSortedItems.length,
                       )}{' '}
-                      of {filteredAndSortedItems.length} items
+                      of{' '}
+                      {(terminalSearchResults
+                        ? searchTotalCount
+                        : initialTotalCount) ??
+                        filteredAndSortedItems.length}{' '}
+                      items
                     </Typography>
                   </Box>
                   <Box className="recommended-addons-modal__list">
                     <ListHeader headerName={headerName} />
-                    {paginatedItems
-                      .filter((item) => !item.isMandatory)
-                      .map((item) => (
-                        <RecommendedItemsCard
-                          key={item.id}
-                          recommendedItem={item}
-                          {...(isAddOnAssociation && {
-                            onSelect: handleAssociateTerminal,
-                            isSelecting: isAssociating,
-                            selectedItemId: associatingItemId,
-                          })}
-                        />
-                      ))}
+                    {paginatedItems.map((item) => (
+                      <RecommendedItemsCard
+                        key={item.id}
+                        recommendedItem={item}
+                        {...(isAddOnAssociation && {
+                          onSelect: handleAssociateTerminal,
+                          isSelecting: isAssociating,
+                          selectedItemId: associatingItemId,
+                        })}
+                      />
+                    ))}
                   </Box>
                   {totalPages > 1 && (
                     <Box className="recommended-addons-modal__pagination">

package/src/components/AddToCart/RecommendedItemsCard.tsx

@@ -19,8 +19,15 @@ import {
   RecommendationSource,
   type TerminalResult,
 } from '@finos/legend-server-marketplace';
-import { Box, Button, CircularProgress, Typography } from '@mui/material';
+import {
+  Box,
+  Button,
+  CircularProgress,
+  Tooltip,
+  Typography,
+} from '@mui/material';
 import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
 import { assertErrorThrown } from '@finos/legend-shared';
 import { toastManager } from '../Toast/CartToast.js';
@@ -33,166 +40,182 @@ interface RecommendedItemsCardProps {
   selectedItemId?: number | undefined;
 }
 
-export const RecommendedItemsCard = (props: RecommendedItemsCardProps) => {
-  const { recommendedItem, onSelect, isSelecting, selectedItemId } = props;
-  const legendMarketplaceBaseStore = useLegendMarketplaceBaseStore();
-  const [isAddingToCart, setIsAddingToCart] = useState(false);
-  const [inCart, setInCart] = useState(() =>
-    legendMarketplaceBaseStore.cartStore.isItemInCart(recommendedItem.id),
-  );
+export const RecommendedItemsCard = observer(
+  (props: RecommendedItemsCardProps) => {
+    const { recommendedItem, onSelect, isSelecting, selectedItemId } = props;
+    const legendMarketplaceBaseStore = useLegendMarketplaceBaseStore();
+    const [isAddingToCart, setIsAddingToCart] = useState(false);
+    const inCart = legendMarketplaceBaseStore.cartStore.isItemInCart(
+      recommendedItem.id,
+    );
 
-  const isAssociationFlow = onSelect !== undefined;
-  const isCurrentlySelecting =
-    isAssociationFlow &&
-    Boolean(isSelecting) &&
-    selectedItemId === recommendedItem.id;
-  const isMarketplaceItem =
-    recommendedItem.source === RecommendationSource.MARKETPLACE;
+    const isAssociationFlow = onSelect !== undefined;
+    const isCurrentlySelecting =
+      isAssociationFlow &&
+      Boolean(isSelecting) &&
+      selectedItemId === recommendedItem.id;
+    const isMarketplaceItem =
+      recommendedItem.source === RecommendationSource.MARKETPLACE;
 
-  const handleAddAddonToCart = (addon: TerminalResult) => {
-    setIsAddingToCart(true);
-    const cartItemRequest =
-      legendMarketplaceBaseStore.cartStore.providerToCartRequest(addon);
+    const handleAddAddonToCart = (addon: TerminalResult) => {
+      setIsAddingToCart(true);
+      const cartItemRequest =
+        legendMarketplaceBaseStore.cartStore.providerToCartRequest(addon);
 
-    flowResult(
-      legendMarketplaceBaseStore.cartStore.addToCartWithAPI(cartItemRequest),
-    )
-      .then((result) => {
-        if (result.success) {
-          setInCart(true);
-        }
-        setIsAddingToCart(false);
-      })
-      .catch((error) => {
-        assertErrorThrown(error);
-        toastManager.error(
-          `Failed to add ${addon.productName} to cart: ${error.message}`,
-        );
-        setIsAddingToCart(false);
-      });
-  };
-
-  const renderAction = () => {
-    if (isAssociationFlow) {
-      if (recommendedItem.isOwned) {
-        return (
-          <Box className="recommended-addons-modal__owned-badge">
-            <CheckCircleIcon />
-            <Typography variant="body2">Owned</Typography>
-          </Box>
-        );
-      }
+      flowResult(
+        legendMarketplaceBaseStore.cartStore.addToCartWithAPI(cartItemRequest),
+      )
+        .catch((error) => {
+          assertErrorThrown(error);
+          toastManager.error(
+            `Failed to add ${addon.productName} to cart: ${error.message}`,
+          );
+        })
+        .finally(() => {
+          setIsAddingToCart(false);
+        });
+    };
 
-      if (isMarketplaceItem) {
-        if (inCart) {
+    const renderAction = () => {
+      if (isAssociationFlow) {
+        if (recommendedItem.isOwned) {
           return (
-            <Box className="recommended-addons-modal__in-cart-badge">
-              <Typography variant="body2">In Cart</Typography>
+            <Box className="recommended-addons-modal__owned-badge">
               <CheckCircleIcon />
+              <Typography variant="body2">Owned</Typography>
             </Box>
           );
         }
+
+        if (isMarketplaceItem) {
+          if (inCart) {
+            return (
+              <Box className="recommended-addons-modal__in-cart-badge">
+                <Typography variant="body2">In Cart</Typography>
+                <CheckCircleIcon />
+              </Box>
+            );
+          }
+          return (
+            <Button
+              variant="outlined"
+              onClick={() => onSelect(recommendedItem)}
+              disabled={Boolean(isSelecting)}
+              size="small"
+              className="recommended-addons-modal__add-btn"
+            >
+              {isCurrentlySelecting ? (
+                <>
+                  Adding... &nbsp;
+                  <CircularProgress size={14} />
+                </>
+              ) : (
+                <>
+                  Add to Cart &nbsp;
+                  <PlusIcon />
+                </>
+              )}
+            </Button>
+          );
+        }
+
         return (
           <Button
             variant="outlined"
             onClick={() => onSelect(recommendedItem)}
             disabled={Boolean(isSelecting)}
             size="small"
-            className="recommended-addons-modal__add-btn"
+            className="recommended-addons-modal__select-btn"
           >
             {isCurrentlySelecting ? (
               <>
-                Adding... &nbsp;
+                Selecting... &nbsp;
                 <CircularProgress size={14} />
               </>
             ) : (
               <>
-                Add to Cart &nbsp;
-                <PlusIcon />
+                Select &nbsp;
+                <CheckIcon />
               </>
             )}
           </Button>
         );
       }
 
-      return (
+      const button = (
         <Button
           variant="outlined"
-          onClick={() => onSelect(recommendedItem)}
-          disabled={Boolean(isSelecting)}
+          onClick={() => handleAddAddonToCart(recommendedItem)}
+          disabled={inCart || isAddingToCart}
           size="small"
-          className="recommended-addons-modal__select-btn"
+          className={clsx('recommended-addons-modal__add-btn', {
+            'recommended-addons-modal__add-btn--added': inCart,
+          })}
         >
-          {isCurrentlySelecting ? (
+          {isAddingToCart ? (
             <>
-              Selecting... &nbsp;
+              Adding... &nbsp;
               <CircularProgress size={14} />
             </>
+          ) : inCart ? (
+            'Added to Cart'
           ) : (
             <>
-              Select &nbsp;
-              <CheckIcon />
+              Add to Cart &nbsp;
+              <PlusIcon />
             </>
           )}
         </Button>
       );
-    }
 
-    return (
-      <Button
-        variant="outlined"
-        onClick={() => handleAddAddonToCart(recommendedItem)}
-        disabled={inCart || isAddingToCart}
-        size="small"
-        className={clsx('recommended-addons-modal__add-btn', {
-          'recommended-addons-modal__add-btn--added': inCart,
-        })}
-      >
-        {isAddingToCart ? (
-          <>
-            Adding... &nbsp;
-            <CircularProgress size={14} />
-          </>
-        ) : inCart ? (
-          'Added to Cart'
-        ) : (
-          <>
-            Add to Cart &nbsp;
-            <PlusIcon />
-          </>
-        )}
-      </Button>
-    );
-  };
+      if (inCart) {
+        return (
+          <Tooltip
+            title={
+              recommendedItem.isMandatory
+                ? 'This is a mandatory item which needs to be associated with this order.'
+                : 'This item is already in your cart.'
+            }
+            arrow={true}
+            placement="top"
+          >
+            <span>{button}</span>
+          </Tooltip>
+        );
+      }
 
-  return (
-    <Box className="recommended-addons-modal__list-item">
-      <Typography
-        variant="body1"
-        className="recommended-addons-modal__item-name"
-      >
-        {recommendedItem.productName}
-      </Typography>
-      <Typography
-        variant="body2"
-        className="recommended-addons-modal__item-provider"
-      >
-        {recommendedItem.providerName}
-      </Typography>
-      <Typography
-        variant="body2"
-        className="recommended-addons-modal__item-price"
-      >
-        {recommendedItem.price.toLocaleString('en-US', {
-          style: 'currency',
-          currency: 'USD',
-          minimumFractionDigits: 2,
-          maximumFractionDigits: 2,
-        })}
-      </Typography>
-      <Box className="recommended-addons-modal__item-action">
-        {renderAction()}
+      return button;
+    };
+
+    return (
+      <Box className="recommended-addons-modal__list-item">
+        <Typography
+          variant="body1"
+          className="recommended-addons-modal__item-name"
+        >
+          {recommendedItem.productName}
+        </Typography>
+        <Typography
+          variant="body2"
+          className="recommended-addons-modal__item-provider"
+        >
+          {recommendedItem.providerName}
+        </Typography>
+        <Typography
+          variant="body2"
+          className="recommended-addons-modal__item-price"
+        >
+          {recommendedItem.price.toLocaleString('en-US', {
+            style: 'currency',
+            currency: 'USD',
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+        </Typography>
+        <Box className="recommended-addons-modal__item-action">
+          {renderAction()}
+        </Box>
       </Box>
-    </Box>
-  );
-};
+    );
+  },
+);

package/src/components/FieldSearchFiltersPanel/FieldSearchFiltersPanel.tsx

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import { Typography } from '@mui/material';
+import { DataProductTypeFilter } from '../../stores/lakehouse/LegendMarketplaceSearchResultsStore.js';
+import type { LegendMarketplaceFieldSearchResultsStore } from '../../stores/lakehouse/LegendMarketplaceFieldSearchResultsStore.js';
+import {
+  FilterCheckboxOption,
+  FilterSection,
+} from '../MarketplaceSearchFiltersPanel/MarketplaceSearchFiltersPanel.js';
+
+export const FieldSearchFiltersPanel: React.FC<{
+  store: LegendMarketplaceFieldSearchResultsStore;
+  onToggleProductType: (productType: DataProductTypeFilter) => void;
+  onClearFilters: () => void;
+}> = observer(({ store, onToggleProductType, onClearFilters }) => (
+  <div className="marketplace-search-filters-panel">
+    <div className="marketplace-search-filters-panel__header">
+      <Typography className="marketplace-search-filters-panel__header__title">
+        Filters
+      </Typography>
+      {store.hasActiveFilters && (
+        <button
+          type="button"
+          className="marketplace-search-filters-panel__header__clear"
+          onClick={onClearFilters}
+        >
+          Clear all
+        </button>
+      )}
+    </div>
+    <div className="marketplace-search-filters-panel__content">
+      <FilterSection title="Data Product Type">
+        <FilterCheckboxOption
+          label="Lakehouse"
+          checked={store.selectedProductTypes.has(
+            DataProductTypeFilter.LAKEHOUSE,
+          )}
+          count={store.lakehouseCount}
+          onChange={() => onToggleProductType(DataProductTypeFilter.LAKEHOUSE)}
+        />
+        <FilterCheckboxOption
+          label="Legacy"
+          checked={store.selectedProductTypes.has(DataProductTypeFilter.LEGACY)}
+          count={store.legacyCount}
+          onChange={() => onToggleProductType(DataProductTypeFilter.LEGACY)}
+        />
+      </FilterSection>
+    </div>
+  </div>
+));