@finos/legend-application-marketplace 0.2.3 → 0.2.5

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>
+));

package/src/components/MarketplaceCard/FieldSearchResultListItem.tsx

@@ -0,0 +1,163 @@
+/**
+ * Copyright (c) 2020-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 { useState } from 'react';
+import { Chip, Typography } from '@mui/material';
+import { DatasetIcon, PackageIcon } from '@finos/legend-art';
+import type {
+  FieldSearchDataProductEntry,
+  FieldSearchResultState,
+} from '../../stores/lakehouse/fieldSearch/FieldSearchResultState.js';
+import { LegendMarketplaceListItem } from '../MarketplaceCard/LegendMarketplaceListItem.js';
+
+enum FieldSearchResultListItemLabel {
+  SHOW_LESS = 'Show Less',
+  MORE_SUFFIX = 'More',
+  DATASET_SEPARATOR = '|',
+  EMPTY_VALUE = '-',
+}
+
+enum FieldSearchResultListItemValue {
+  COLLAPSED_VISIBLE_DATA_PRODUCTS = 2,
+  MAX_DESCRIPTION_LENGTH = 150,
+}
+
+export const FieldSearchResultListRow = observer(
+  (props: {
+    fieldSearchResultState: FieldSearchResultState;
+    expanded: boolean;
+    onToggleExpanded: (rowId: string) => void;
+    onOpenDataProduct: (dataProduct: FieldSearchDataProductEntry) => void;
+  }): React.ReactNode => {
+    const {
+      fieldSearchResultState,
+      expanded,
+      onToggleExpanded,
+      onOpenDataProduct,
+    } = props;
+
+    const [descriptionExpanded, setDescriptionExpanded] = useState(false);
+    const description = fieldSearchResultState.fieldDescription;
+    const isDescriptionTruncatable =
+      description.length >
+      FieldSearchResultListItemValue.MAX_DESCRIPTION_LENGTH;
+    const displayDescription =
+      !descriptionExpanded && isDescriptionTruncatable
+        ? `${description.substring(0, FieldSearchResultListItemValue.MAX_DESCRIPTION_LENGTH)}...`
+        : description;
+
+    const visibleDataProducts = expanded
+      ? fieldSearchResultState.dataProducts
+      : fieldSearchResultState.dataProducts.slice(
+          0,
+          FieldSearchResultListItemValue.COLLAPSED_VISIBLE_DATA_PRODUCTS,
+        );
+    const hiddenDataProductCount = Math.max(
+      0,
+      fieldSearchResultState.dataProducts.length -
+        FieldSearchResultListItemValue.COLLAPSED_VISIBLE_DATA_PRODUCTS,
+    );
+    const toggleLabel = expanded
+      ? FieldSearchResultListItemLabel.SHOW_LESS
+      : `+${hiddenDataProductCount} ${FieldSearchResultListItemLabel.MORE_SUFFIX}`;
+
+    const content = (
+      <div className="marketplace-lakehouse-field-search-results__list-item-grid">
+        <div className="marketplace-lakehouse-field-search-results__field-name-cell">
+          <Typography className="marketplace-lakehouse-field-search-results__list-item-text marketplace-lakehouse-field-search-results__list-item-text--primary">
+            {fieldSearchResultState.fieldName}
+          </Typography>
+        </div>
+        <div className="marketplace-lakehouse-field-search-results__type-cell">
+          <Typography className="marketplace-lakehouse-field-search-results__list-item-text">
+            {fieldSearchResultState.fieldType}
+          </Typography>
+        </div>
+        <div className="marketplace-lakehouse-field-search-results__description-cell">
+          <Typography className="marketplace-lakehouse-field-search-results__list-item-text">
+            {displayDescription}
+          </Typography>
+          {isDescriptionTruncatable && (
+            <button
+              className="marketplace-lakehouse-field-search-results__description-toggle"
+              onClick={(e) => {
+                e.stopPropagation();
+                setDescriptionExpanded(!descriptionExpanded);
+              }}
+            >
+              {descriptionExpanded ? 'Show less' : 'Show more'}
+            </button>
+          )}
+        </div>
+        <div className="marketplace-lakehouse-field-search-results__data-products-cell">
+          {fieldSearchResultState.dataProducts.length > 0 ? (
+            <>
+              {visibleDataProducts.map((dataProduct) => (
+                <Chip
+                  key={`${fieldSearchResultState.id}-${dataProduct.path}-${dataProduct.datasetName ?? ''}`}
+                  clickable={true}
+                  label={
+                    <span className="marketplace-lakehouse-field-search-results__chip-label">
+                      <PackageIcon className="marketplace-lakehouse-field-search-results__chip-icon" />
+                      <span>{dataProduct.name}</span>
+                      {dataProduct.datasetName && (
+                        <span className="marketplace-lakehouse-field-search-results__chip-secondary">
+                          <span className="marketplace-lakehouse-field-search-results__chip-separator">
+                            {FieldSearchResultListItemLabel.DATASET_SEPARATOR}
+                          </span>
+                          <DatasetIcon className="marketplace-lakehouse-field-search-results__chip-icon" />
+                          <span className="marketplace-lakehouse-field-search-results__chip-secondary-text">
+                            {dataProduct.datasetName}
+                          </span>
+                        </span>
+                      )}
+                    </span>
+                  }
+                  onClick={() => onOpenDataProduct(dataProduct)}
+                  className="marketplace-lakehouse-field-search-results__data-product-link"
+                  size="small"
+                />
+              ))}
+              {fieldSearchResultState.dataProducts.length >
+                FieldSearchResultListItemValue.COLLAPSED_VISIBLE_DATA_PRODUCTS && (
+                <Chip
+                  key={`${fieldSearchResultState.id}-toggle`}
+                  label={toggleLabel}
+                  onClick={() => onToggleExpanded(fieldSearchResultState.id)}
+                  size="small"
+                  variant="outlined"
+                  className="marketplace-lakehouse-field-search-results__data-product-toggle"
+                />
+              )}
+            </>
+          ) : (
+            <Typography className="marketplace-lakehouse-field-search-results__list-item-text marketplace-lakehouse-field-search-results__list-item-text--empty">
+              {FieldSearchResultListItemLabel.EMPTY_VALUE}
+            </Typography>
+          )}
+        </div>
+      </div>
+    );
+
+    return (
+      <LegendMarketplaceListItem
+        className="marketplace-lakehouse-field-search-results__list-item"
+        content={content}
+      />
+    );
+  },
+);

package/src/components/MarketplaceSearchFiltersPanel/MarketplaceSearchFiltersPanel.tsx

@@ -181,7 +181,7 @@ const TaxonomyTreeNode: React.FC<{
   );
 });
 
-const FilterSection: React.FC<{
+export const FilterSection: React.FC<{
   title: string;
   children: React.ReactNode;
 }> = ({ title, children }) => (
@@ -195,7 +195,7 @@ const FilterSection: React.FC<{
   </div>
 );
 
-const FilterCheckboxOption: React.FC<{
+export const FilterCheckboxOption: React.FC<{
   label: string;
   checked: boolean;
   onChange: () => void;

package/src/components/ProviderCard/LegendMarketplaceTerminalCard.tsx

@@ -48,6 +48,9 @@ export const LegendMarketplaceTerminalCard = observer(
     );
 
     const [modalMessage, setModalMessage] = useState<string>('');
+    const [modalTotalCount, setModalTotalCount] = useState<
+      number | null | undefined
+    >(undefined);
 
     const legendMarketplaceBaseStore = useLegendMarketplaceBaseStore();
     const applicationStore = legendMarketplaceBaseStore.applicationStore;
@@ -72,6 +75,7 @@ export const LegendMarketplaceTerminalCard = observer(
         if (result.recommendations && result.recommendations.length > 0) {
           setRecommendedItems(result.recommendations);
           setModalMessage(result.message);
+          setModalTotalCount(result.totalCount);
           setShowRecommendationsModal(true);
         }
       } catch (error) {
@@ -97,9 +101,11 @@ export const LegendMarketplaceTerminalCard = observer(
         _selectedTerminal: TerminalResult,
         recommendations: TerminalResult[],
         responseMessage: string,
+        totalCount?: number | null,
       ) => {
         setRecommendedItems(recommendations);
         setModalMessage(responseMessage);
+        setModalTotalCount(totalCount);
         setShowRecommendationsModal(true);
       },
       [],
@@ -203,6 +209,7 @@ export const LegendMarketplaceTerminalCard = observer(
           setShowModal={setShowRecommendationsModal}
           onViewCart={handleViewCart}
           onTerminalSelected={handleTerminalSelected}
+          totalCount={modalTotalCount}
         />
       </Card>
     );