@finos/legend-application-marketplace 0.1.51 → 0.1.53

package/src/components/AddToCart/RecommendedAddOnsModal.tsx

@@ -15,6 +15,7 @@
  */
 
 import { observer } from 'mobx-react-lite';
+import { useMemo, useState } from 'react';
 import {
   Dialog,
   DialogTitle,
@@ -22,15 +23,24 @@ import {
   DialogActions,
   Button,
   Typography,
-  Grid,
   Box,
   IconButton,
+  TextField,
+  InputAdornment,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+  type SelectChangeEvent,
 } from '@mui/material';
 import {
   CloseIcon,
   CheckCircleIcon,
   ArrowRightIcon,
   WarningIcon,
+  SearchIcon,
+  ArrowUpIcon,
+  ArrowDownIcon,
 } from '@finos/legend-art';
 import {
   TerminalItemType,
@@ -58,8 +68,34 @@ export const RecommendedAddOnsModal = observer(
       onViewCart,
     } = props;
 
+    const [searchTerm, setSearchTerm] = useState('');
+    const [sortOrder, setSortOrder] = useState<'asc' | 'desc' | ''>('');
+
+    const filteredAndSortedItems = useMemo(() => {
+      let items = [...recommendedItems];
+
+      if (searchTerm) {
+        const search = searchTerm.toLowerCase();
+        items = items.filter(
+          (item) =>
+            item.productName.toLowerCase().includes(search) ||
+            item.providerName.toLowerCase().includes(search),
+        );
+      }
+
+      if (sortOrder) {
+        items.sort((a, b) =>
+          sortOrder === 'asc' ? a.price - b.price : b.price - a.price,
+        );
+      }
+
+      return items;
+    }, [recommendedItems, searchTerm, sortOrder]);
+
     const closeModal = () => {
       setShowModal(false);
+      setSearchTerm('');
+      setSortOrder('');
     };
 
     const handleViewCart = () => {
@@ -67,6 +103,12 @@ export const RecommendedAddOnsModal = observer(
       closeModal();
     };
 
+    const handleSortChange = (
+      event: SelectChangeEvent<'asc' | 'desc' | ''>,
+    ) => {
+      setSortOrder(event.target.value);
+    };
+
     if (!showModal) {
       return null;
     }
@@ -119,8 +161,10 @@ export const RecommendedAddOnsModal = observer(
               className="recommended-addons-modal__section-title"
             >
               {terminal?.terminalItemType === TerminalItemType.TERMINAL
-                ? 'Recommended Add-Ons'
-                : 'Recommended Terminals'}
+                ? `Recommended Add-Ons for ${terminal.providerName}`
+                : terminal
+                  ? `Recommended Terminals for ${terminal.providerName}`
+                  : ''}
             </Typography>
             <Typography
               variant="body2"
@@ -141,24 +185,108 @@ export const RecommendedAddOnsModal = observer(
               </Typography>
             </Box>
           ) : (
-            <Grid container={true} spacing={2}>
-              {recommendedItems.map((item) => (
-                <Grid size={{ xs: 12, sm: 6 }} key={item.id}>
-                  {terminal ? (
-                    <RecommendedItemsCard
-                      key={item.id}
-                      vendorProfileId={terminal.id}
-                      recommendedItem={item}
-                    />
-                  ) : (
+            <>
+              <Box className="recommended-addons-modal__filter-controls">
+                <TextField
+                  size="medium"
+                  placeholder="Search any service..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="recommended-addons-modal__search-field"
+                  slotProps={{
+                    input: {
+                      endAdornment: (
+                        <InputAdornment position="end">
+                          <SearchIcon />
+                        </InputAdornment>
+                      ),
+                    },
+                  }}
+                />
+                <FormControl
+                  size="medium"
+                  className="recommended-addons-modal__sort-select"
+                  sx={{ minWidth: 180 }}
+                >
+                  <InputLabel
+                    id="recommended-addons-sort-label"
+                    sx={{ fontSize: '1rem' }}
+                  >
+                    Sort by Price
+                  </InputLabel>
+                  <Select
+                    labelId="recommended-addons-sort-label"
+                    value={sortOrder}
+                    label="Sort by Price"
+                    onChange={handleSortChange}
+                    sx={{ fontSize: '1rem' }}
+                  >
+                    <MenuItem value="" sx={{ fontSize: '1rem' }}>
+                      <em>None</em>
+                    </MenuItem>
+                    <MenuItem value="asc" sx={{ fontSize: '1rem' }}>
+                      <Box display="flex" alignItems="center">
+                        <ArrowUpIcon fontSize="small" />
+                        <Typography sx={{ ml: 0.5, fontSize: '1rem' }}>
+                          Low to High
+                        </Typography>
+                      </Box>
+                    </MenuItem>
+                    <MenuItem value="desc" sx={{ fontSize: '1rem' }}>
+                      <Box display="flex" alignItems="center">
+                        <ArrowDownIcon fontSize="small" />
+                        <Typography sx={{ ml: 0.5, fontSize: '1rem' }}>
+                          High to Low
+                        </Typography>
+                      </Box>
+                    </MenuItem>
+                  </Select>
+                </FormControl>
+              </Box>
+
+              {filteredAndSortedItems.length === 0 ? (
+                <Box className="recommended-addons-modal__empty-state">
+                  <Typography variant="body1">
+                    No items match your search criteria.
+                  </Typography>
+                </Box>
+              ) : (
+                <Box className="recommended-addons-modal__list">
+                  <Box className="recommended-addons-modal__list-header">
+                    <Typography
+                      variant="subtitle2"
+                      className="recommended-addons-modal__header-name"
+                    >
+                      Product Name
+                    </Typography>
+                    <Typography
+                      variant="subtitle2"
+                      className="recommended-addons-modal__header-provider"
+                    >
+                      Provider
+                    </Typography>
+                    <Typography
+                      variant="subtitle2"
+                      className="recommended-addons-modal__header-price"
+                    >
+                      Price
+                    </Typography>
+                    <Typography
+                      variant="subtitle2"
+                      className="recommended-addons-modal__header-action"
+                    >
+                      Action
+                    </Typography>
+                  </Box>
+                  {filteredAndSortedItems.map((item) => (
                     <RecommendedItemsCard
                       key={item.id}
                       recommendedItem={item}
                     />
-                  )}
-                </Grid>
-              ))}
-            </Grid>
+                  ))}
+                </Box>
+              )}
+            </>
           )}
         </DialogContent>
 

package/src/components/AddToCart/RecommendedItemsCard.tsx

@@ -16,16 +16,7 @@
 
 import { clsx, PlusIcon } from '@finos/legend-art';
 import type { TerminalResult } from '@finos/legend-server-marketplace';
-import {
-  Box,
-  Button,
-  Card,
-  CardActions,
-  CardContent,
-  Chip,
-  CircularProgress,
-  Typography,
-} from '@mui/material';
+import { Box, Button, CircularProgress, Typography } from '@mui/material';
 import { flowResult } from 'mobx';
 import { useState } from 'react';
 import { assertErrorThrown } from '@finos/legend-shared';
@@ -33,12 +24,11 @@ import { toastManager } from '../Toast/CartToast.js';
 import { useLegendMarketplaceBaseStore } from '../../application/providers/LegendMarketplaceFrameworkProvider.js';
 
 interface RecommendedItemsCardProps {
-  vendorProfileId?: number;
   recommendedItem: TerminalResult;
 }
 
 export const RecommendedItemsCard = (props: RecommendedItemsCardProps) => {
-  const { vendorProfileId, recommendedItem } = props;
+  const { recommendedItem } = props;
   const legendMarketplaceBaseStore = useLegendMarketplaceBaseStore();
   const [isAddingToCart, setIsAddingToCart] = useState(false);
   const [inCart, setInCart] = useState(false);
@@ -47,9 +37,6 @@ export const RecommendedItemsCard = (props: RecommendedItemsCardProps) => {
     setIsAddingToCart(true);
     const cartItemRequest =
       legendMarketplaceBaseStore.cartStore.providerToCartRequest(addon);
-    if (vendorProfileId) {
-      cartItemRequest.vendorProfileId = vendorProfileId;
-    }
 
     flowResult(
       legendMarketplaceBaseStore.cartStore.addToCartWithAPI(cartItemRequest),
@@ -70,62 +57,45 @@ export const RecommendedItemsCard = (props: RecommendedItemsCardProps) => {
   };
 
   return (
-    <Card className="recommended-addons-modal__addon-card">
-      <CardContent className="recommended-addons-modal__card-content">
-        <Box className="recommended-addons-modal__card-header">
-          <Typography
-            variant="subtitle1"
-            className="recommended-addons-modal__product-name"
-          >
-            {recommendedItem.productName}
-          </Typography>
-          <Chip
-            label={recommendedItem.providerName}
-            size="small"
-            className="recommended-addons-modal__provider-chip"
-          />
-        </Box>
-
-        <Typography
-          variant="body2"
-          className="recommended-addons-modal__description"
-        >
-          {recommendedItem.description || 'No description available'}
-        </Typography>
-
-        <Box className="recommended-addons-modal__card-footer">
-          <Typography
-            variant="body2"
-            className={clsx('recommended-addons-modal__price', {
-              'recommended-addons-modal__price__free':
-                recommendedItem.price === 0,
+    <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 === 0
+          ? 'Free'
+          : recommendedItem.price.toLocaleString('en-US', {
+              style: 'currency',
+              currency: 'USD',
+              maximumFractionDigits: 2,
             })}
-          >
-            {recommendedItem.price === 0
-              ? 'Free'
-              : recommendedItem.price.toLocaleString('en-US', {
-                  style: 'currency',
-                  currency: 'USD',
-                  maximumFractionDigits: 2,
-                })}
-          </Typography>
-        </Box>
-      </CardContent>
-
-      <CardActions className="recommended-addons-modal__card-actions">
+      </Typography>
+      <Box className="recommended-addons-modal__item-action">
         <Button
           variant={inCart ? 'outlined' : 'contained'}
           onClick={() => handleAddAddonToCart(recommendedItem)}
           disabled={inCart || isAddingToCart}
-          fullWidth={true}
+          size="small"
           className={clsx('recommended-addons-modal__add-btn', {
-            'recommended-addons-modal__add-btn__added': inCart,
+            'recommended-addons-modal__add-btn--added': inCart,
           })}
         >
           {isAddingToCart ? (
             <>
               Adding... &nbsp;
-              <CircularProgress size={16} />
+              <CircularProgress size={14} />
             </>
           ) : inCart ? (
             'Added to Cart'
@@ -136,7 +106,7 @@ export const RecommendedItemsCard = (props: RecommendedItemsCardProps) => {
             </>
           )}
         </Button>
-      </CardActions>
-    </Card>
+      </Box>
+    </Box>
   );
 };

package/src/components/Header/LegendMarketplaceAppInfo.tsx

@@ -15,8 +15,8 @@
  */
 
 import type React from 'react';
-import { useLegendMarketplaceApplicationStore } from '../../application/providers/LegendMarketplaceFrameworkProvider.js';
-import { isNonNullable } from '@finos/legend-shared';
+import { useLegendMarketplaceBaseStore } from '../../application/providers/LegendMarketplaceFrameworkProvider.js';
+import { isNonNullable, isValidUrl } from '@finos/legend-shared';
 import {
   CopyIcon,
   Dialog,
@@ -28,24 +28,68 @@ import {
   ModalTitle,
   TimesIcon,
 } from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import { TextField } from '@mui/material';
 
 export const LegendMarketplaceAppInfo: React.FC<{
   open: boolean;
   closeModal: () => void;
-}> = (props) => {
+}> = observer((props) => {
   const { open, closeModal } = props;
-  const applicationStore = useLegendMarketplaceApplicationStore();
+  const legendMarketplaceBaseStore = useLegendMarketplaceBaseStore();
+  const applicationStore = legendMarketplaceBaseStore.applicationStore;
   const config = applicationStore.config;
+
+  const configData: {
+    label: string;
+    value: string | undefined;
+  }[] = [
+    {
+      label: 'Environment',
+      value: config.env,
+    },
+    {
+      label: 'Version',
+      value: config.appVersion,
+    },
+    {
+      label: 'Revision',
+      value: config.appVersionCommitId,
+    },
+    {
+      label: 'Build Time',
+      value: config.appVersionBuildTime,
+    },
+  ];
+
+  const serverData: {
+    label: string;
+    value: string | undefined;
+    setter?: (val: string | undefined) => void;
+  }[] = [
+    {
+      label: 'Engine Server',
+      value: config.engineServerUrl,
+    },
+    {
+      label: 'Depot Server',
+      value: config.depotServerUrl,
+    },
+    {
+      label: 'Marketplace Server',
+      value: legendMarketplaceBaseStore.marketplaceServerClient.baseUrl,
+      setter: (val: string | undefined): void =>
+        legendMarketplaceBaseStore.marketplaceServerClient.setBaseUrl(val),
+    },
+  ];
+
   const copyInfo = (): void => {
     applicationStore.clipboardService
       .copyTextToClipboard(
         [
-          `Environment: ${config.env}`,
-          `Version: ${config.appVersion}`,
-          `Revision: ${config.appVersionCommitId}`,
-          `Build Time: ${config.appVersionBuildTime}`,
-          `Engine Server: ${config.engineServerUrl}`,
-          `Depot Server: ${config.depotServerUrl}`,
+          [...configData, ...serverData].map(
+            (data) => `${data.label}: ${data.value}`,
+          ),
         ]
           .filter(isNonNullable)
           .join('\n'),
@@ -92,26 +136,12 @@ export const LegendMarketplaceAppInfo: React.FC<{
           </ModalHeaderActions>
         </ModalHeader>
         <ModalBody>
-          <div className="app__info__entry">
-            <div className="app__info__entry__title">Environment:</div>
-            <div className="app__info__entry__value">{config.env}</div>
-          </div>
-          <div className="app__info__entry">
-            <div className="app__info__entry__title">Version:</div>
-            <div className="app__info__entry__value">{config.appVersion}</div>
-          </div>
-          <div className="app__info__entry">
-            <div className="app__info__entry__title">Revision:</div>
-            <div className="app__info__entry__value">
-              {config.appVersionCommitId}
+          {configData.map((data) => (
+            <div key={data.label} className="app__info__entry">
+              <div className="app__info__entry__title">{data.label}:</div>
+              <div className="app__info__entry__value">{data.value}</div>
             </div>
-          </div>
-          <div className="app__info__entry">
-            <div className="app__info__entry__title">Build Time:</div>
-            <div className="app__info__entry__value">
-              {config.appVersionBuildTime}
-            </div>
-          </div>
+          ))}
           <div className="app__info__entry">
             <div
               onClick={goToReleaseLog}
@@ -121,33 +151,54 @@ export const LegendMarketplaceAppInfo: React.FC<{
             </div>
           </div>
           <div className="app__info__group">
-            <div className="app__info__entry">
-              <div className="app__info__entry__title">Engine Server:</div>
-              <div className="app__info__entry__value">
-                <a
-                  href={config.engineServerUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {config.engineServerUrl}
-                </a>
+            {serverData.map((data) => (
+              <div key={data.label} className="app__info__entry">
+                <div className="app__info__entry__title">{data.label}:</div>
+                <div className="app__info__entry__value">
+                  {data.setter === undefined ? (
+                    <a
+                      href={data.value}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {data.value}
+                    </a>
+                  ) : (
+                    <TextField
+                      value={data.value}
+                      spellCheck={false}
+                      onChange={(event) => {
+                        const stringValue = event.target.value;
+                        data.setter?.(stringValue ? stringValue : undefined);
+                      }}
+                      placeholder={`${data.label} client base URL`}
+                      error={!isValidUrl(data.value ?? '')}
+                      helperText={
+                        !isValidUrl(data.value ?? '')
+                          ? 'Invalid URL'
+                          : undefined
+                      }
+                      variant="outlined"
+                      size="small"
+                      fullWidth={true}
+                      className="app__info__entry__value--editable"
+                      slotProps={{
+                        htmlInput: {
+                          className: 'app__info__entry__value--editable__input',
+                        },
+                        formHelperText: {
+                          className:
+                            'app__info__entry__value--editable__helper-text',
+                        },
+                      }}
+                    />
+                  )}
+                </div>
               </div>
-            </div>
-            <div className="app__info__entry">
-              <div className="app__info__entry__title">Depot Server:</div>
-              <div className="app__info__entry__value">
-                <a
-                  href={config.depotServerUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {config.depotServerUrl}
-                </a>
-              </div>
-            </div>
+            ))}
           </div>
         </ModalBody>
       </Modal>
     </Dialog>
   );
-};
+});

package/src/components/ProviderCard/LegendMarketplaceTerminalCard.tsx

@@ -25,6 +25,7 @@ import {
   CardMedia,
   Chip,
   CircularProgress,
+  Typography,
 } from '@mui/material';
 import type { TerminalResult } from '@finos/legend-server-marketplace';
 import { CheckCircleIcon, ShoppingCartIcon } from '@finos/legend-art';
@@ -104,10 +105,25 @@ export const LegendMarketplaceTerminalCard = observer(
             image={getImageUrl()}
             alt="data asset"
           />
+          {terminalResult.category && (
+            <Chip
+              label={terminalResult.category}
+              className="legend-marketplace-terminal-card__category-chip"
+            />
+          )}
           <CardContent className="legend-marketplace-terminal-card__content">
-            <Box className="legend-marketplace-terminal-card__title">
+            <Typography
+              variant="subtitle2"
+              className="legend-marketplace-terminal-card__provider"
+            >
+              {terminalResult.providerName}
+            </Typography>
+            <Typography
+              variant="h6"
+              className="legend-marketplace-terminal-card__title"
+            >
               {terminalResult.productName}
-            </Box>
+            </Typography>
           </CardContent>
         </CardActionArea>
         <CardActions className="legend-marketplace-terminal-card__action-buttons">