@finos/legend-application-marketplace 0.0.19 → 0.0.21

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 { flowResult } from 'mobx';
+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>
   );
 };
@@ -96,10 +163,7 @@ export const DataProductGroupAccessViewer = observer(
     const accessPoints = accessGroupState.group.accessPoints;
 
     const handleClick = (): void => {
-      flowResult(accessGroupState.handleClick()).catch(
-        accessGroupState.accessState.viewerState.applicationStore
-          .alertUnhandledError,
-      );
+      accessGroupState.handleClick();
     };
 
     const renderAccess = (val: DataProductGroupAccess): React.ReactNode => {
@@ -209,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,
                   },
@@ -217,6 +281,9 @@ export const DataProductGroupAccessViewer = observer(
                 onRowDataUpdated={(params) => {
                   params.api.refreshCells({ force: true });
                 }}
+                masterDetail={true}
+                detailCellRenderer={TDSColumnMoreInfoCellRenderer}
+                detailRowHeight={200}
               />
             </div>
           </div>
@@ -235,7 +302,6 @@ export const DataProducteDataAccess = observer(
     const anchor = generateAnchorForActivity(
       DATA_PRODUCT_VIEWER_ACTIVITY_MODE.DATA_ACCESS,
     );
-
     useEffect(() => {
       if (sectionRef.current) {
         dataSpaceViewerState.layoutState.setWikiPageAnchor(
@@ -291,6 +357,19 @@ export const DataProducteDataAccess = observer(
                 />
               ),
             )}
+            {dataSpaceViewerState.dataContractAccessPointGroup && (
+              <DataContractCreator
+                onClose={() =>
+                  dataSpaceViewerState.setDataContractAccessPointGroup(
+                    undefined,
+                  )
+                }
+                accessGroupPoint={
+                  dataSpaceViewerState.dataContractAccessPointGroup
+                }
+                viewerState={dataSpaceViewerState}
+              />
+            )}
           </div>
         </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>
     );
   }),
 );

package/src/pages/Lakehouse/MarketplaceLakehouseHome.tsx

@@ -0,0 +1,167 @@
+/**
+ * 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 {
+  useMarketplaceLakehouseStore,
+  withMarketplaceLakehouseStore,
+} from './MarketplaceLakehouseStoreProvider.js';
+import { useEffect, type JSX } from 'react';
+import {
+  clsx,
+  CubesLoadingIndicator,
+  CubesLoadingIndicatorIcon,
+} from '@finos/legend-art';
+import {
+  Checkbox,
+  Chip,
+  FormControlLabel,
+  FormGroup,
+  Grid2 as Grid,
+} from '@mui/material';
+import type { DataProductState } from '../../stores/lakehouse/MarketplaceLakehouseStore.js';
+import { generateLakehouseDataProduct } from '../../__lib__/LegendMarketplaceNavigation.js';
+import { generateGAVCoordinates } from '@finos/legend-storage';
+import { LegendMarketplaceSearchBar } from '../../components/SearchBar/LegendMarketplaceSearchBar.js';
+import { DepotScope } from '@finos/legend-server-depot';
+import { LegendMarketplaceCard } from '../../components/MarketplaceCard/LegendMarketplaceCard.js';
+import { LegendMarketplacePage } from '../LegendMarketplacePage.js';
+
+export const LegendDataProductVendorCard = (props: {
+  dataAsset: DataProductState;
+  onClick: (dataAsset: DataProductState) => void;
+}): JSX.Element => {
+  const { dataAsset, onClick } = props;
+
+  const content = (
+    <>
+      <Chip
+        label={dataAsset.productEntity.versionId}
+        className={clsx('legend-marketplace-vendor-card__type')}
+      />
+      <div className="legend-marketplace-vendor-card__name">
+        {dataAsset.productEntity.path.split('::').pop()}
+      </div>
+      <div className="legend-marketplace-vendor-card__description">
+        {`${dataAsset.productEntity.groupId}:${dataAsset.productEntity.artifactId}`}
+      </div>
+    </>
+  );
+
+  const moreInfo = <div>{dataAsset.productEntity.path}</div>;
+
+  return (
+    <LegendMarketplaceCard
+      size="large"
+      content={content}
+      onClick={() => onClick(dataAsset)}
+      moreInfo={moreInfo}
+    />
+  );
+};
+
+export const MarketplaceLakehouseHome = withMarketplaceLakehouseStore(
+  observer(() => {
+    const marketPlaceStore = useMarketplaceLakehouseStore();
+    const onSearch = (
+      provider: string | undefined,
+      query: string | undefined,
+    ) => {
+      marketPlaceStore.handleSearch(query);
+    };
+
+    const onSearchChange = (query: string) => {
+      if (query === '') {
+        // use for clearing of search
+        marketPlaceStore.handleSearch(query);
+      }
+    };
+
+    useEffect(() => {
+      marketPlaceStore.init();
+    }, [marketPlaceStore]);
+
+    return (
+      <LegendMarketplacePage className="legend-marketplace-lakehouse-home">
+        <CubesLoadingIndicator
+          isLoading={marketPlaceStore.loadingProductsState.isInProgress}
+        >
+          <CubesLoadingIndicatorIcon />
+        </CubesLoadingIndicator>
+        <div className="legend-marketplace-data-product-search__container">
+          <LegendMarketplaceSearchBar
+            onSearch={onSearch}
+            onChange={onSearchChange}
+          />
+          <FormGroup row={true}>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={marketPlaceStore.filter.releaseFilter}
+                  onChange={() =>
+                    marketPlaceStore.handleFilterChange(DepotScope.RELEASES)
+                  }
+                />
+              }
+              label="Releases"
+            />
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={marketPlaceStore.filter.snapshotFilter}
+                  onChange={() =>
+                    marketPlaceStore.handleFilterChange(DepotScope.SNAPSHOT)
+                  }
+                />
+              }
+              label="Snapshots"
+            />
+          </FormGroup>
+        </div>
+        <div className="legend-marketplace-home__vendors-cards">
+          <Grid
+            container={true}
+            spacing={{ xs: 2, md: 3, xl: 4 }}
+            columns={{ xs: 1, sm: 2, xl: 3, xxl: 4, xxxl: 5, xxxxl: 6 }}
+            sx={{ justifyContent: 'center' }}
+          >
+            {marketPlaceStore.filterProducts?.map((dpState) => (
+              <Grid key={dpState.id} size={1}>
+                <LegendDataProductVendorCard
+                  dataAsset={dpState}
+                  onClick={(dataAsset: DataProductState) => {
+                    {
+                      marketPlaceStore.applicationStore.navigationService.navigator.goToLocation(
+                        generateLakehouseDataProduct(
+                          generateGAVCoordinates(
+                            dpState.productEntity.groupId,
+                            dpState.productEntity.artifactId,
+                            dpState.productEntity.versionId,
+                          ),
+                          dpState.productEntity.path,
+                        ),
+                      );
+                    }
+                  }}
+                />
+              </Grid>
+            ))}
+          </Grid>
+        </div>
+      </LegendMarketplacePage>
+    );
+  }),
+);