@finos/legend-application-marketplace 0.2.2 → 0.2.4

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/LegendServiceCard/LegendServiceCard.tsx

@@ -15,8 +15,13 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { Box, Chip } from '@mui/material';
-import { clsx, MarkdownTextViewer } from '@finos/legend-art';
+import { Box, Chip, IconButton } from '@mui/material';
+import {
+  clsx,
+  MarkdownTextViewer,
+  StarIcon,
+  EmptyStarIcon,
+} from '@finos/legend-art';
 import { LegendMarketplaceCard } from '../MarketplaceCard/LegendMarketplaceCard.js';
 import { type LegendServiceCardState } from '../../stores/dataAPIs/LegendMarketplaceDataAPIsStore.js';
 import { ServiceOwnershipType } from '@finos/legend-graph';
@@ -27,8 +32,10 @@ export const LegendServiceCard = observer(
   (props: {
     serviceCardState: LegendServiceCardState;
     onClick: () => void;
+    isFavorite: boolean;
+    onToggleFavorite: () => void;
   }): React.ReactNode => {
-    const { serviceCardState, onClick } = props;
+    const { serviceCardState, onClick, isFavorite, onToggleFavorite } = props;
 
     const truncatedDescription =
       serviceCardState.description &&
@@ -43,6 +50,21 @@ export const LegendServiceCard = observer(
       <Box className="marketplace-legend-service-card__container">
         <Box className="marketplace-legend-service-card__content">
           <Box className="marketplace-legend-service-card__tags">
+            <IconButton
+              className={clsx(
+                'marketplace-legend-service-card__favorite-btn',
+                isFavorite &&
+                  'marketplace-legend-service-card__favorite-btn--active',
+              )}
+              onClick={(e) => {
+                e.stopPropagation();
+                onToggleFavorite();
+              }}
+              size="small"
+              title={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
+            >
+              {isFavorite ? <StarIcon /> : <EmptyStarIcon />}
+            </IconButton>
             {serviceCardState.ownershipType && (
               <Chip
                 size="small"

package/src/components/LegendServiceCard/LegendServiceGrid.tsx

@@ -0,0 +1,206 @@
+/**
+ * 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 { useCallback, useMemo, useRef } from 'react';
+import { Chip, Tooltip } from '@mui/material';
+import { clsx, DownloadIcon, StarIcon } from '@finos/legend-art';
+import type {
+  LegendMarketplaceDataAPIsStore,
+  LegendServiceCardState,
+} from '../../stores/dataAPIs/LegendMarketplaceDataAPIsStore.js';
+import { ServiceOwnershipType } from '@finos/legend-graph';
+import { isString } from '@finos/legend-shared';
+import {
+  DataGrid,
+  type DataGridApi,
+  type DataGridCellRendererParams,
+  type DataGridColumnDefinition,
+} from '@finos/legend-lego/data-grid';
+
+const FavoriteCellRenderer = observer(
+  (
+    params: DataGridCellRendererParams<LegendServiceCardState> & {
+      store: LegendMarketplaceDataAPIsStore;
+    },
+  ): React.ReactNode => {
+    const { data, store } = params;
+    if (!data) {
+      return null;
+    }
+    const isFav = store.isFavorite(data.service.pattern);
+    return (
+      <button
+        className={clsx('marketplace-legend-service-grid__star-btn', {
+          'marketplace-legend-service-grid__star-btn--active': isFav,
+        })}
+        onClick={(e) => {
+          e.stopPropagation();
+          store.toggleFavorite(data.service.pattern);
+        }}
+        title={isFav ? 'Remove from favorites' : 'Add to favorites'}
+      >
+        <StarIcon />
+      </button>
+    );
+  },
+);
+
+const OwnersCellRenderer = observer(
+  (
+    params: DataGridCellRendererParams<LegendServiceCardState>,
+  ): React.ReactNode => {
+    const data = params.data;
+    if (!data) {
+      return null;
+    }
+    return (
+      <div className="marketplace-legend-service-grid__chips">
+        {data.owners.map((owner) => (
+          <Chip
+            key={owner}
+            size="small"
+            label={owner}
+            className={`marketplace-legend-service-list-row__chip marketplace-legend-service-list-row__chip--${
+              data.ownershipType === ServiceOwnershipType.DEPLOYMENT_OWNERSHIP
+                ? 'did'
+                : 'owner'
+            }`}
+          />
+        ))}
+      </div>
+    );
+  },
+);
+
+export const LegendServiceGridView = observer(
+  (props: {
+    services: LegendServiceCardState[];
+    store: LegendMarketplaceDataAPIsStore;
+    onRowClick: (serviceCardState: LegendServiceCardState) => void;
+  }): React.ReactNode => {
+    const { services, store, onRowClick } = props;
+    const gridApiRef = useRef<DataGridApi<LegendServiceCardState> | null>(null);
+
+    const columnDefs: DataGridColumnDefinition<LegendServiceCardState>[] =
+      useMemo(
+        () => [
+          {
+            headerName: '',
+            colId: 'favorite',
+            cellRenderer: FavoriteCellRenderer,
+            cellRendererParams: { store },
+            width: 50,
+            maxWidth: 50,
+            minWidth: 50,
+            resizable: false,
+            sortable: false,
+            filter: false,
+            suppressHeaderMenuButton: true,
+          },
+          {
+            headerName: 'Title',
+            colId: 'title',
+            valueGetter: (p) => p.data?.title,
+            minWidth: 150,
+            flex: 2,
+            filter: true,
+            resizable: true,
+          },
+          {
+            headerName: 'URL Path',
+            colId: 'urlPath',
+            valueGetter: (p) => p.data?.service.pattern,
+            minWidth: 200,
+            flex: 3,
+            filter: true,
+            resizable: true,
+          },
+          {
+            headerName: 'Description',
+            colId: 'description',
+            valueGetter: (p) => p.data?.description,
+            minWidth: 200,
+            flex: 4,
+            filter: true,
+            resizable: true,
+          },
+          {
+            headerName: 'Owner / DID',
+            colId: 'owners',
+            cellRenderer: OwnersCellRenderer,
+            valueGetter: (p) => p.data?.owners.join(', '),
+            minWidth: 150,
+            flex: 2,
+            filter: true,
+            resizable: true,
+            autoHeight: true,
+            wrapText: true,
+          },
+        ],
+        [store],
+      );
+
+    const exportToCSV = useCallback((): void => {
+      gridApiRef.current?.exportDataAsCsv({
+        fileName: 'legend-services.csv',
+        columnKeys: ['title', 'urlPath', 'description', 'owners'],
+        processCellCallback: (params) => {
+          const value: unknown = params.value;
+          if (isString(value)) {
+            return value.replaceAll(/[\r\n]+/g, ' ');
+          }
+          return isString(value) ? value : '';
+        },
+      });
+    }, []);
+
+    return (
+      <div className="marketplace-legend-service-grid">
+        <div className="marketplace-legend-service-grid__toolbar">
+          <span className="marketplace-legend-service-grid__toolbar__count">
+            {`${services.length} result${services.length === 1 ? '' : 's'}`}
+          </span>
+          <Tooltip title="Export visible rows to CSV" placement="left">
+            <button
+              className="marketplace-legend-service-grid__toolbar__export-btn"
+              onClick={exportToCSV}
+            >
+              <DownloadIcon />
+              Export to CSV
+            </button>
+          </Tooltip>
+        </div>
+        <div className="marketplace-legend-service-grid__ag-grid ag-theme-balham">
+          <DataGrid
+            rowData={services}
+            columnDefs={columnDefs}
+            onGridReady={(params) => {
+              gridApiRef.current = params.api;
+            }}
+            onCellClicked={(event) => {
+              if (event.data && event.column.getColId() !== 'favorite') {
+                onRowClick(event.data);
+              }
+            }}
+            suppressCellFocus={true}
+            overlayNoRowsTemplate="No services match the filters."
+          />
+        </div>
+      </div>
+    );
+  },
+);