@finos/legend-application-marketplace 0.0.20 → 0.0.21

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(() => {
@@ -87,7 +87,7 @@ const LakehousePlaceHeaderTabs = observer(() => {
   );
 });
 
-export const LakehouseMarketplaceHeader = observer(() => {
+export const MarketplaceLakehouseHeader = observer(() => {
   const applicationStore = useApplicationStore();
 
   const navigateToHome = (): void => {

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>,

package/src/pages/Home/LegendMarketplaceHome.tsx

@@ -16,7 +16,6 @@
 
 import { observer } from 'mobx-react-lite';
 import { LegendMarketplaceSearchBar } from '../../components/SearchBar/LegendMarketplaceSearchBar.js';
-import { LegendMarketplaceHeader } from '../../components/Header/LegendMarketplaceHeader.js';
 import { useApplicationStore } from '@finos/legend-application';
 import {
   generateSearchResultsRoute,
@@ -26,6 +25,7 @@ import type { LightDataProduct } from '@finos/legend-server-marketplace';
 import { shuffle } from '@finos/legend-shared';
 import { LegendMarketplaceLightDataProductCard } from '../../components/DataProductCard/LegendMarketplaceLightDataProductCard.js';
 import { Grid2 as Grid } from '@mui/material';
+import { LegendMarketplacePage } from '../LegendMarketplacePage.js';
 
 // Temporary placeholder data for assets
 
@@ -81,57 +81,48 @@ export const LegendMarketplaceHome = observer(() => {
   };
 
   return (
-    <div className="app__page">
-      <div className="legend-marketplace-home">
-        <div className="legend-marketplace-home__body">
-          <LegendMarketplaceHeader />
-          <div className="legend-marketplace-home__content">
-            <div className="legend-marketplace-home__landing">
-              <div className="legend-marketplace-home__landing__title">
-                <h1>
-                  <span style={{ color: '#76A1E3' }}>All data in </span>
-                  <span style={{ color: 'white' }}>One Place</span>
-                </h1>
-              </div>
-              <div className="legend-marketplace-home__landing__description">
-                <h3>
-                  Discover the right data and accelerate analytic productivity.
-                </h3>
-              </div>
-              <div className="legend-marketplace-home__landing__search-bar">
-                <LegendMarketplaceSearchBar onSearch={onSearch} />
-              </div>
-            </div>
-            <div className="legend-marketplace-home__vendors-title">
-              <h3>Explore our Data</h3>
-            </div>
-            <div className="legend-marketplace-home__vendors-cards">
-              <Grid
-                container={true}
-                spacing={{ xs: 2, md: 3, xl: 4 }}
-                columns={{ xs: 1, sm: 2, md: 3, xl: 6 }}
-                sx={{ justifyContent: 'center' }}
-              >
-                {shuffle(dataAssets).map((asset) => (
-                  <Grid
-                    key={`${asset.provider}.${asset.type}.${asset.description}`}
-                    size={1}
-                  >
-                    <LegendMarketplaceLightDataProductCard
-                      dataAsset={asset}
-                      onClick={(dataAsset: LightDataProduct) => {
-                        applicationStore.navigationService.navigator.goToLocation(
-                          generateVendorDetailsRoute(dataAsset.provider),
-                        );
-                      }}
-                    />
-                  </Grid>
-                ))}
-              </Grid>
-            </div>
-          </div>
+    <LegendMarketplacePage className="legend-marketplace-home">
+      <div className="legend-marketplace-home__landing">
+        <div className="legend-marketplace-home__landing__title">
+          <h1>
+            <span style={{ color: '#76A1E3' }}>All data in </span>
+            <span style={{ color: 'white' }}>One Place</span>
+          </h1>
         </div>
+        <div className="legend-marketplace-home__landing__description">
+          <h3>Discover the right data and accelerate analytic productivity.</h3>
+        </div>
+        <div className="legend-marketplace-home__landing__search-bar">
+          <LegendMarketplaceSearchBar onSearch={onSearch} />
+        </div>
+      </div>
+      <div className="legend-marketplace-home__vendors-title">
+        <h3>Explore our Data</h3>
+      </div>
+      <div className="legend-marketplace-home__vendors-cards">
+        <Grid
+          container={true}
+          spacing={{ xs: 2, md: 3, xl: 4 }}
+          columns={{ xs: 1, sm: 2, md: 3, xl: 6 }}
+          sx={{ justifyContent: 'center' }}
+        >
+          {shuffle(dataAssets).map((asset) => (
+            <Grid
+              key={`${asset.provider}.${asset.type}.${asset.description}`}
+              size={1}
+            >
+              <LegendMarketplaceLightDataProductCard
+                dataAsset={asset}
+                onClick={(dataAsset: LightDataProduct) => {
+                  applicationStore.navigationService.navigator.goToLocation(
+                    generateVendorDetailsRoute(dataAsset.provider),
+                  );
+                }}
+              />
+            </Grid>
+          ))}
+        </Grid>
       </div>
-    </div>
+    </LegendMarketplacePage>
   );
 });

package/src/{components → pages}/Lakehouse/DataProductDataAccess.tsx

@@ -16,7 +16,6 @@
 
 import {
   AnchorLinkIcon,
-  ChevronDownIcon,
   clsx,
   MarkdownTextViewer,
   QuestionCircleIcon,
@@ -27,7 +26,7 @@ import {
   DATA_PRODUCT_VIEWER_ACTIVITY_MODE,
   generateAnchorForActivity,
 } from '../../stores/lakehouse/DataProductViewerNavigation.js';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import type { DataProductViewerState } from '../../stores/lakehouse/DataProductViewerState.js';
 import { useApplicationStore } from '@finos/legend-application';
 import {
@@ -38,8 +37,20 @@ import {
   DataGrid,
   type DataGridCellRendererParams,
 } from '@finos/legend-lego/data-grid';
-import type { V1_LakehouseAccessPoint } from '@finos/legend-graph';
-import { DataContractCreator } from './entitlements/DataContractCreator.js';
+import {
+  type V1_RawLambda,
+  V1_RenderStyle,
+  type V1_LakehouseAccessPoint,
+} from '@finos/legend-graph';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
+import {
+  CODE_EDITOR_LANGUAGE,
+  CODE_EDITOR_THEME,
+} from '@finos/legend-code-editor';
+import { Tab, Tabs } from '@mui/material';
+import { useLegendMarketplaceBaseStore } from '../../application/LegendMarketplaceFrameworkProvider.js';
+import { type PlainObject } from '@finos/legend-shared';
+import { DataContractCreator } from './entitlements/EntitlementsDataContractCreator.js';
 
 export const DataProductMarkdownTextViewer: React.FC<{ value: string }> = (
   props,
@@ -77,12 +88,68 @@ const TDSColumnMoreInfoCellRenderer = (
   params: DataGridCellRendererParams<V1_LakehouseAccessPoint>,
 ): React.ReactNode => {
   const data = params.data;
+  const store = useLegendMarketplaceBaseStore();
+  const enum MoreInfoTabs {
+    GRAMMAR = 'Grammar',
+  }
+  const [activeTab, setActiveTab] = useState(MoreInfoTabs.GRAMMAR);
+  const handleTabChange = (
+    event: React.SyntheticEvent,
+    newValue: MoreInfoTabs,
+  ) => {
+    setActiveTab(newValue);
+  };
+  const [accessPointGrammar, setAccessPointGrammar] =
+    useState<string>('Loading ...');
+
+  useEffect(() => {
+    if (!data) {
+      return;
+    }
+
+    const fetchGrammar = async () => {
+      try {
+        const grammar = await store.engineServerClient.JSONToGrammar_lambda(
+          data.func as unknown as PlainObject<V1_RawLambda>,
+          V1_RenderStyle.PRETTY,
+        );
+
+        setAccessPointGrammar(grammar);
+      } catch {
+        throw new Error('Error fetching access point grammar');
+      }
+    };
+
+    fetchGrammar().catch((error) => {
+      throw new Error(`Error fetching access point grammar: ${error.message}`);
+    });
+  }, [data, store]);
+
   if (!data) {
     return null;
   }
+
   return (
-    <div className="data-space__viewer__grid__empty-cell">
-      <ChevronDownIcon />
+    <div>
+      <Tabs value={activeTab} onChange={handleTabChange}>
+        <Tab label={MoreInfoTabs.GRAMMAR} value={MoreInfoTabs.GRAMMAR} />
+      </Tabs>
+
+      <div
+        className="data-space__viewer__more-info__container"
+        style={{ height: '200px', width: '100%' }}
+      >
+        <CodeEditor
+          inputValue={accessPointGrammar}
+          isReadOnly={true}
+          language={CODE_EDITOR_LANGUAGE.TEXT}
+          hideMinimap={true}
+          hideGutter={true}
+          hideActionBar={true}
+          lightTheme={CODE_EDITOR_THEME.GITHUB_LIGHT}
+          extraEditorOptions={{ scrollBeyondLastLine: false, wordWrap: 'on' }}
+        />
+      </div>
     </div>
   );
 };
@@ -206,7 +273,7 @@ export const DataProductGroupAccessViewer = observer(
                     sortable: false,
                     resizable: false,
                     headerClass: 'data-space__viewer__grid__last-column-header',
-                    cellRenderer: TDSColumnMoreInfoCellRenderer,
+                    cellRenderer: 'agGroupCellRenderer',
                     headerName: 'More Info',
                     flex: 1,
                   },
@@ -214,6 +281,9 @@ export const DataProductGroupAccessViewer = observer(
                 onRowDataUpdated={(params) => {
                   params.api.refreshCells({ force: true });
                 }}
+                masterDetail={true}
+                detailCellRenderer={TDSColumnMoreInfoCellRenderer}
+                detailRowHeight={200}
               />
             </div>
           </div>

package/src/{components → pages}/Lakehouse/LakehouseDataProduct.tsx

@@ -18,7 +18,7 @@ import { observer } from 'mobx-react-lite';
 import {
   useMarketplaceLakehouseStore,
   withMarketplaceLakehouseStore,
-} from './MarketLakehouseStoreProvider.js';
+} from './MarketplaceLakehouseStoreProvider.js';
 import { useEffect } from 'react';
 import {
   CubesLoadingIndicator,
@@ -33,7 +33,7 @@ import { guaranteeNonNullable } from '@finos/legend-shared';
 import { DataProductViewer } from './DataProductViewer.js';
 import { LEGEND_APPLICATION_COLOR_THEME } from '@finos/legend-application';
 import { useAuth } from 'react-oidc-context';
-import { LakehouseMarketplaceHeader } from './LakehouseHeader.js';
+import { LegendMarketplacePage } from '../LegendMarketplacePage.js';
 
 export const LakehouseDataProduct = withMarketplaceLakehouseStore(
   observer(() => {
@@ -62,27 +62,18 @@ export const LakehouseDataProduct = withMarketplaceLakehouseStore(
     }, [applicationStore]);
 
     return (
-      <div className="app__page">
-        <div className="legend-marketplace-home">
-          <div className="legend-marketplace-data-product-home__body">
-            <LakehouseMarketplaceHeader />
-            <div className="legend-marketplace-home__content">
-              <div className="legend-marketplace-data-product__content">
-                <CubesLoadingIndicator
-                  isLoading={marketPlaceStore.loadingProductsState.isInProgress}
-                >
-                  <CubesLoadingIndicatorIcon />
-                </CubesLoadingIndicator>
-                {marketPlaceStore.dataProductViewer && (
-                  <DataProductViewer
-                    dataSpaceViewerState={marketPlaceStore.dataProductViewer}
-                  />
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+      <LegendMarketplacePage className="legend-marketplace-lakehouse-data-product">
+        <CubesLoadingIndicator
+          isLoading={marketPlaceStore.loadingProductsState.isInProgress}
+        >
+          <CubesLoadingIndicatorIcon />
+        </CubesLoadingIndicator>
+        {marketPlaceStore.dataProductViewer && (
+          <DataProductViewer
+            dataSpaceViewerState={marketPlaceStore.dataProductViewer}
+          />
+        )}
+      </LegendMarketplacePage>
     );
   }),
 );