@finos/legend-application-marketplace 0.0.19 → 0.0.21

package/src/application/LegendMarketplaceWebApplication.tsx

@@ -25,6 +25,7 @@ import { flowResult } from 'mobx';
 import { useApplicationStore } from '@finos/legend-application';
 import {
   BrowserEnvironmentProvider,
+  Outlet,
   Route,
   Routes,
 } from '@finos/legend-application/browser';
@@ -33,8 +34,11 @@ import {
   useLegendMarketplaceApplicationStore,
   useLegendMarketplaceBaseStore,
 } from './LegendMarketplaceFrameworkProvider.js';
-import { LEGEND_MARKETPLACE_ROUTE_PATTERN } from '../__lib__/LegendMarketplaceNavigation.js';
-import { LakehouseMarketplace } from '../components/Lakehouse/LakehouseMarketplace.js';
+import {
+  isLakehouseRoute,
+  LEGEND_MARKETPLACE_ROUTE_PATTERN,
+} from '../__lib__/LegendMarketplaceNavigation.js';
+import { MarketplaceLakehouseHome } from '../pages/Lakehouse/MarketplaceLakehouseHome.js';
 import { LegendMarketplaceHome } from '../pages/Home/LegendMarketplaceHome.js';
 import { LegendMarketplaceSearchResults } from '../pages/SearchResults/LegendMarketplaceSearchResults.js';
 import {
@@ -44,9 +48,13 @@ import {
 } from 'react-oidc-context';
 import type { User } from 'oidc-client-ts';
 import type { LegendMarketplaceOidcConfig } from './LegendMarketplaceApplicationConfig.js';
-import { LakehouseDataProduct } from '../components/Lakehouse/LakehouseDataProduct.js';
+import { LakehouseDataProduct } from '../pages/Lakehouse/LakehouseDataProduct.js';
 import { LegendMarketPlaceVendorData } from '../pages/VendorData/LegendMarketplaceVendorData.js';
-import { LakehouseEntitlements } from '../components/Lakehouse/entitlements/LakehouseEntitlements.js';
+import { LakehouseEntitlements } from '../pages/Lakehouse/entitlements/LakehouseEntitlements.js';
+import { LakehouseSubscriptions } from '../pages/Lakehouse/subscriptions/LakehouseSubscriptions.js';
+import { LegendMarketplaceHeader } from '../components/Header/LegendMarketplaceHeader.js';
+import { MarketplaceLakehouseHeader } from '../components/Header/MarketplaceLakehouseHeader.js';
+import { LegendMarketplacePage } from '../pages/LegendMarketplacePage.js';
 
 const NotFoundPage = observer(() => {
   const applicationStore = useApplicationStore();
@@ -55,7 +63,7 @@ const NotFoundPage = observer(() => {
     applicationStore.navigationService.navigator.getCurrentLocation();
 
   return (
-    <div className="app__page legend-marketplace__app__page">
+    <LegendMarketplacePage className="legend-marketplace__not-found">
       <div className="not-found-screen not-found-screen--no-documentation">
         <div className="not-found-screen__icon">
           <div className="not-found-screen__icon__ghost">
@@ -88,7 +96,7 @@ const NotFoundPage = observer(() => {
           </div>
         </div>
       </div>
-    </div>
+    </LegendMarketplacePage>
   );
 });
 
@@ -103,7 +111,7 @@ export const LegendMarketplaceWebApplicationRouter = observer(() => {
   }, [applicationStore, baseStore]);
 
   const ProtectedLakehouseMarketplace = withAuthenticationRequired(
-    LakehouseMarketplace,
+    MarketplaceLakehouseHome,
     {
       OnRedirecting: () => (
         <CubesLoadingIndicator isLoading={true}>
@@ -144,11 +152,38 @@ export const LegendMarketplaceWebApplicationRouter = observer(() => {
     },
   );
 
+  const ProtectedLakehouseSubscriptions = withAuthenticationRequired(
+    LakehouseSubscriptions,
+    {
+      OnRedirecting: () => (
+        <CubesLoadingIndicator isLoading={true}>
+          <CubesLoadingIndicatorIcon />
+        </CubesLoadingIndicator>
+      ),
+      signinRedirectArgs: {
+        state: window.location.pathname,
+      },
+    },
+  );
+
   return (
     <div className="app">
       {baseStore.initState.hasCompleted && (
-        <>
-          <Routes>
+        <Routes>
+          <Route
+            element={
+              <>
+                {isLakehouseRoute(
+                  baseStore.applicationStore.navigationService.navigator.getCurrentLocation(),
+                ) ? (
+                  <MarketplaceLakehouseHeader />
+                ) : (
+                  <LegendMarketplaceHeader />
+                )}
+                <Outlet />
+              </>
+            }
+          >
             <Route
               path={LEGEND_MARKETPLACE_ROUTE_PATTERN.LAKEHOUSE_PRODUCT}
               element={<ProtectedLakehouseDataProduct />}
@@ -169,7 +204,6 @@ export const LegendMarketplaceWebApplicationRouter = observer(() => {
               path={LEGEND_MARKETPLACE_ROUTE_PATTERN.LAKEHOUSE_ENTITLEMENTS}
               element={<ProtectedLakehouseEntitlements />}
             />
-
             <Route
               path={LEGEND_MARKETPLACE_ROUTE_PATTERN.LAKEHOUSE}
               element={<ProtectedLakehouseMarketplace />}
@@ -186,9 +220,13 @@ export const LegendMarketplaceWebApplicationRouter = observer(() => {
               path={LEGEND_MARKETPLACE_ROUTE_PATTERN.VENDOR_DATA}
               element={<LegendMarketPlaceVendorData />}
             />
+            <Route
+              path={LEGEND_MARKETPLACE_ROUTE_PATTERN.LAKEHOUSE_SUBSCRIPTIONS}
+              element={<ProtectedLakehouseSubscriptions />}
+            />
             <Route path="*" element={<NotFoundPage />} />
-          </Routes>
-        </>
+          </Route>
+        </Routes>
       )}
     </div>
   );

package/src/components/DataProductCard/LegendMarketplaceDataProductSearchCard.tsx

@@ -15,9 +15,10 @@
  */
 
 import { type JSX } from 'react';
-import { Button, Card, CardActions, CardContent } from '@mui/material';
+import { Button } from '@mui/material';
 import type { DataProductSearchResult } from '@finos/legend-server-marketplace';
 import DOMPurify from 'dompurify';
+import { LegendMarketplaceCard } from '../MarketplaceCard/LegendMarketplaceCard.js';
 
 const MAX_DESCRIPTION_LENGTH = 250;
 
@@ -42,40 +43,47 @@ export const LegendMarketplaceProductSearchCard = (props: {
         : DOMPurify.sanitize(productSearchResult.data_product_description),
   };
 
-  return (
-    <Card
-      variant="outlined"
-      className="legend-marketplace-product-search-result-card"
-    >
-      <CardContent className="legend-marketplace-product-search-result-card__content">
-        <div className="legend-marketplace-product-search-result-card__vendor-name">
-          {productSearchResult.vendor_name}
-        </div>
-        <div className="legend-marketplace-product-search-result-card__data-product-name">
-          {productSearchResult.data_product_name}
-        </div>
-        <div className="legend-marketplace-product-search-result-card__data-product-description">
-          {productSearchResult.data_product_description.length > 0 && (
-            <div dangerouslySetInnerHTML={descriptionHTML} />
-          )}
-        </div>
-      </CardContent>
-      <CardActions className="legend-marketplace-product-search-result-card__actions">
+  const content = (
+    <>
+      <div className="legend-marketplace-product-search-result-card__vendor-name">
+        {productSearchResult.vendor_name}
+      </div>
+      <div className="legend-marketplace-product-search-result-card__data-product-name">
+        {productSearchResult.data_product_name}
+      </div>
+      <div className="legend-marketplace-product-search-result-card__data-product-description">
+        {productSearchResult.data_product_description.length > 0 && (
+          <div dangerouslySetInnerHTML={descriptionHTML} />
+        )}
+      </div>
+    </>
+  );
+
+  const actions = (
+    <>
+      <Button
+        variant="outlined"
+        onClick={() => onPreviewClick(productSearchResult)}
+      >
+        Preview
+      </Button>
+      {productSearchResult.data_product_link && (
         <Button
-          variant="outlined"
-          onClick={() => onPreviewClick(productSearchResult)}
+          variant="contained"
+          onClick={() => onLearnMoreClick(productSearchResult)}
         >
-          Preview
+          Learn More
         </Button>
-        {productSearchResult.data_product_link && (
-          <Button
-            variant="contained"
-            onClick={() => onLearnMoreClick(productSearchResult)}
-          >
-            Learn More
-          </Button>
-        )}
-      </CardActions>
-    </Card>
+      )}
+    </>
+  );
+
+  return (
+    <LegendMarketplaceCard
+      size="large"
+      content={content}
+      actions={actions}
+      className="legend-marketplace-product-search-result-card"
+    />
   );
 };

package/src/components/DataProductCard/LegendMarketplaceLightDataProductCard.tsx

@@ -15,50 +15,47 @@
  */
 
 import { type JSX } from 'react';
-import { Card, CardActionArea, CardContent, Chip } from '@mui/material';
+import { Chip } from '@mui/material';
 import { clsx } from '@finos/legend-art';
 import type { LightDataProduct } from '@finos/legend-server-marketplace';
+import { LegendMarketplaceCard } from '../MarketplaceCard/LegendMarketplaceCard.js';
 
 export const LegendMarketplaceLightDataProductCard = (props: {
   dataAsset: LightDataProduct;
   onClick: (dataAsset: LightDataProduct) => void;
 }): JSX.Element => {
   const { dataAsset, onClick } = props;
+
+  const content = (
+    <>
+      <Chip
+        label={dataAsset.type}
+        className={clsx('legend-marketplace-light-data-product-card__type', {
+          'legend-marketplace-light-data-product-card__type--vendor':
+            dataAsset.type === 'vendor',
+          'legend-marketplace-light-data-product-card__type--curated':
+            dataAsset.type === 'curated',
+        })}
+      />
+      <div className="legend-marketplace-light-data-product-card__name">
+        {dataAsset.provider}
+      </div>
+      <div className="legend-marketplace-light-data-product-card__description">
+        {dataAsset.description}
+      </div>
+    </>
+  );
+
+  const moreInfo = dataAsset.moreInfo ? (
+    <div>{dataAsset.moreInfo}</div>
+  ) : undefined;
+
   return (
-    <Card
-      variant="outlined"
-      className="legend-marketplace-light-data-product-card"
-    >
-      <CardActionArea
-        onClick={() => onClick(dataAsset)}
-        sx={{ height: '100%' }}
-      >
-        <CardContent className="legend-marketplace-light-data-product-card__content">
-          <Chip
-            label={dataAsset.type}
-            className={clsx(
-              'legend-marketplace-light-data-product-card__type',
-              {
-                'legend-marketplace-light-data-product-card__type--vendor':
-                  dataAsset.type === 'vendor',
-                'legend-marketplace-light-data-product-card__type--curated':
-                  dataAsset.type === 'curated',
-              },
-            )}
-          />
-          <div className="legend-marketplace-light-data-product-card__name">
-            {dataAsset.provider}
-          </div>
-          <div className="legend-marketplace-light-data-product-card__description">
-            {dataAsset.description}
-          </div>
-        </CardContent>
-        {dataAsset.moreInfo.length > 0 && (
-          <CardContent className="legend-marketplace-light-data-product-card__more-info">
-            <div>{dataAsset.moreInfo}</div>
-          </CardContent>
-        )}
-      </CardActionArea>
-    </Card>
+    <LegendMarketplaceCard
+      size="small"
+      content={content}
+      onClick={() => onClick(dataAsset)}
+      moreInfo={moreInfo}
+    />
   );
 };

package/src/components/{Lakehouse/LakehouseHeader.tsx → Header/MarketplaceLakehouseHeader.tsx}

@@ -23,7 +23,7 @@ import {
   MenuContentItem,
   MenuIcon,
 } from '@finos/legend-art';
-import { LegendMarketplaceAppInfo } from '../Header/LegendMarketplaceAppInfo.js';
+import { LegendMarketplaceAppInfo } from '../../components/Header/LegendMarketplaceAppInfo.js';
 import { useState } from 'react';
 
 const LakehouseHeaderMenu = observer(() => {
@@ -63,6 +63,10 @@ const LakehousePlaceHeaderTabs = observer(() => {
       title: 'Entitlements',
       urlRoute: LEGEND_MARKETPLACE_ROUTE_PATTERN.LAKEHOUSE_ENTITLEMENTS,
     },
+    {
+      title: 'Subscriptions',
+      urlRoute: LEGEND_MARKETPLACE_ROUTE_PATTERN.LAKEHOUSE_SUBSCRIPTIONS,
+    },
   ];
   const navigateToPage = (route: string): void => {
     applicationStore.navigationService.navigator.goToLocation(route);
@@ -83,7 +87,7 @@ const LakehousePlaceHeaderTabs = observer(() => {
   );
 });
 
-export const LakehouseMarketplaceHeader = observer(() => {
+export const MarketplaceLakehouseHeader = observer(() => {
   const applicationStore = useApplicationStore();
 
   const navigateToHome = (): void => {
@@ -99,7 +103,7 @@ export const LakehouseMarketplaceHeader = observer(() => {
         className="legend-marketplace-header__name"
         onClick={() => navigateToHome()}
       >
-        Legend Marketplace
+        Legend Lakehouse
       </div>
       <LakehousePlaceHeaderTabs />
     </div>

package/src/components/MarketplaceCard/LegendMarketplaceCard.tsx

@@ -0,0 +1,98 @@
+/**
+ * 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 { useRef, useState, type JSX } from 'react';
+import {
+  Card,
+  CardActionArea,
+  CardActions,
+  CardContent,
+  Slide,
+} from '@mui/material';
+import { clsx } from '@finos/legend-art';
+
+export const LegendMarketplaceCard = (props: {
+  content: JSX.Element;
+  size: 'small' | 'large';
+  actions?: JSX.Element;
+  onClick?: () => void;
+  moreInfo?: JSX.Element | undefined;
+  className?: string;
+}): JSX.Element => {
+  const { content, size, actions, onClick, moreInfo, className } = props;
+
+  const [isMouseOver, setIsMouseOver] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const CardContentComponent = (
+    <>
+      <CardContent
+        className={clsx('legend-marketplace-card__content', {
+          'legend-marketplace-card__content--with-actions':
+            actions !== undefined,
+        })}
+      >
+        {content}
+      </CardContent>
+      {actions && (
+        <CardActions className="legend-marketplace-card__actions">
+          {actions}
+        </CardActions>
+      )}
+      {moreInfo && (
+        <Slide direction="up" in={isMouseOver} container={containerRef.current}>
+          <CardContent className="legend-marketplace-card__more-info">
+            {moreInfo}
+          </CardContent>
+        </Slide>
+      )}
+    </>
+  );
+
+  return (
+    <Card
+      variant="outlined"
+      className={clsx(
+        'legend-marketplace-card',
+        {
+          'legend-marketplace-card--small': size === 'small',
+          'legend-marketplace-card--large': size === 'large',
+        },
+        className,
+      )}
+      ref={containerRef}
+    >
+      {onClick ? (
+        <CardActionArea
+          onClick={onClick}
+          onMouseEnter={() => setIsMouseOver(true)}
+          onMouseLeave={() => setIsMouseOver(false)}
+          className="legend-marketplace-card__content-container"
+        >
+          {CardContentComponent}
+        </CardActionArea>
+      ) : (
+        <div
+          onMouseEnter={() => setIsMouseOver(true)}
+          onMouseLeave={() => setIsMouseOver(false)}
+          className="legend-marketplace-card__content-container"
+        >
+          {CardContentComponent}
+        </div>
+      )}
+    </Card>
+  );
+};

package/src/components/ProviderCard/LegendMarketplaceProviderCard.tsx

@@ -15,53 +15,61 @@
  */
 
 import { type JSX } from 'react';
-import { Button, Card, CardActions, CardContent, Chip } from '@mui/material';
+import { Button, Chip } from '@mui/material';
 import type { ProviderResult } from '@finos/legend-server-marketplace';
 import { CheckCircleIcon, ShoppingCartIcon } from '@finos/legend-art';
+import { LegendMarketplaceCard } from '../MarketplaceCard/LegendMarketplaceCard.js';
 
 export const LegendMarketplaceProviderCard = (props: {
   providerResult: ProviderResult;
   onAddToCartClick: (providerResult: ProviderResult) => void;
 }): JSX.Element => {
   const { providerResult, onAddToCartClick } = props;
+
+  const content = (
+    <>
+      <div className="legend-marketplace-vendor-data-card__vendor-name">
+        {providerResult.providerName}
+      </div>
+      <div className="legend-marketplace-vendor-data-card__product-name">
+        {providerResult.productName || 'N/A'}
+      </div>
+      <div className="legend-marketplace-vendor-data-card__vendor-name__description">
+        {providerResult.description}
+      </div>
+    </>
+  );
+
+  const actions = providerResult.isOwned ? (
+    <div className="legend-marketplace-vendor-data-card__vendor-name__owned">
+      Already have access &nbsp; <CheckCircleIcon />
+    </div>
+  ) : (
+    <>
+      <Button
+        variant="outlined"
+        className="legend-marketplace-vendor-data-card__add-to-cart-button"
+        onClick={() => onAddToCartClick(providerResult)}
+      >
+        Add to cart &nbsp;
+        <ShoppingCartIcon />
+      </Button>
+      {typeof providerResult.price === 'number' && (
+        <Chip
+          label={`$${providerResult.price.toFixed(2)} per month`}
+          className="legend-marketplace-vendor-data-card__price"
+          sx={{ color: 'white', backgroundColor: '#077d55' }}
+        />
+      )}
+    </>
+  );
+
   return (
-    <Card variant="outlined" className="legend-marketplace-vendor-data-card">
-      <CardContent className="legend-marketplace-vendor-data-card__body">
-        <div className="legend-marketplace-vendor-data-card__vendor-name">
-          {providerResult.providerName}
-        </div>
-        <div className="legend-marketplace-vendor-data-card__product-name">
-          {providerResult.productName || 'N/A'}
-        </div>
-        <div className="legend-marketplace-vendor-data-card__vendor-name__description">
-          {providerResult.description}
-        </div>
-      </CardContent>
-      <CardActions className="legend-marketplace-vendor-data-card-button-group">
-        {providerResult.isOwned ? (
-          <div className="legend-marketplace-vendor-data-card__vendor-name__owned">
-            Already have access &nbsp; <CheckCircleIcon />
-          </div>
-        ) : (
-          <>
-            <Button
-              variant="outlined"
-              className="vendor-data-card-add-to-cart-button"
-              onClick={() => onAddToCartClick(providerResult)}
-            >
-              Add to cart &nbsp;
-              <ShoppingCartIcon />
-            </Button>
-            {typeof providerResult.price === 'number' && (
-              <Chip
-                label={`$${providerResult.price.toFixed(2)} per month`}
-                className="legend-marketplace-vendor-data-card-button-group__price"
-                sx={{ color: 'white', backgroundColor: '#077d55' }}
-              />
-            )}
-          </>
-        )}
-      </CardActions>
-    </Card>
+    <LegendMarketplaceCard
+      size="large"
+      content={content}
+      actions={actions}
+      className="legend-marketplace-vendor-data-card"
+    />
   );
 };

package/src/components/__test-utils__/LegendMarketplaceStoreTestUtils.tsx

@@ -22,20 +22,17 @@ import {
   ApplicationStoreProvider,
 } from '@finos/legend-application';
 import { TEST__BrowserEnvironmentProvider } from '@finos/legend-application/test';
-import { Route, Routes } from '@finos/legend-application/browser';
 import {
   type LegendMarketplaceApplicationStore,
   LegendMarketplaceBaseStore,
 } from '../../stores/LegendMarketplaceBaseStore.js';
-import { LEGEND_MARKETPLACE_ROUTE_PATTERN } from '../../__lib__/LegendMarketplaceNavigation.js';
-import { LegendMarketplaceHome } from '../../pages/Home/LegendMarketplaceHome.js';
 import { LEGEND_MARKETPLACE_TEST_ID } from '../../__lib__/LegendMarketplaceTesting.js';
 import { LegendMarketplacePluginManager } from '../../application/LegendMarketplacePluginManager.js';
 import { Core_LegendMarketplaceApplicationPlugin } from '../../application/extensions/Core_LegendMarketplaceApplicationPlugin.js';
 import { TEST__getTestLegendMarketplaceApplicationConfig } from '../../application/__test-utils__/LegendMarketplaceApplicationTestUtils.js';
 import { LegendMarketplaceFrameworkProvider } from '../../application/LegendMarketplaceFrameworkProvider.js';
 import searchResults from './TEST_DATA__SearchResults.json' with { type: 'json' };
-import { LegendMarketplaceSearchResults } from '../../pages/SearchResults/LegendMarketplaceSearchResults.js';
+import { LegendMarketplaceWebApplicationRouter } from '../../application/LegendMarketplaceWebApplication.js';
 
 export const TEST__provideMockedLegendMarketplaceBaseStore =
   async (customization?: {
@@ -86,16 +83,7 @@ export const TEST__setUpMarketplace = async (
     <ApplicationStoreProvider store={MOCK__store.applicationStore}>
       <TEST__BrowserEnvironmentProvider initialEntries={[route ?? '/']}>
         <LegendMarketplaceFrameworkProvider>
-          <Routes>
-            <Route
-              path={LEGEND_MARKETPLACE_ROUTE_PATTERN.DEFAULT}
-              element={<LegendMarketplaceHome />}
-            />
-            <Route
-              path={LEGEND_MARKETPLACE_ROUTE_PATTERN.SEARCH_RESULTS}
-              element={<LegendMarketplaceSearchResults />}
-            />
-          </Routes>
+          <LegendMarketplaceWebApplicationRouter />
         </LegendMarketplaceFrameworkProvider>
       </TEST__BrowserEnvironmentProvider>
     </ApplicationStoreProvider>,