@finos/legend-application-marketplace 0.0.20 → 0.0.21

package/src/pages/Lakehouse/shared/GridItemViewer.tsx

@@ -0,0 +1,105 @@
+/**
+ * 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 { Grid2, Typography } from '@mui/material';
+import {
+  GridTiemStatus,
+  type GridItemDetail,
+} from '../../../stores/lakehouse/LakehouseUtils.js';
+import { clsx } from '@finos/legend-art';
+
+export const GridItemsViewer = (props: {
+  details: GridItemDetail[];
+  title: string;
+}) => {
+  const gridDetails = props.details;
+  const title = props.title;
+  return (
+    <>
+      <Typography
+        className="entitlements-grid-viewer__header"
+        variant="h6"
+        sx={{ marginBottom: '0.5rem' }}
+      >
+        {title}
+      </Typography>
+      <Grid2
+        container={true}
+        spacing={0}
+        sx={{
+          '--Grid-borderWidth': '1px',
+          borderTop: 'var(--Grid-borderWidth) solid',
+          borderLeft: 'var(--Grid-borderWidth) solid',
+          borderColor: 'divider',
+          '& > div': {
+            borderRight: 'var(--Grid-borderWidth) solid',
+            borderBottom: 'var(--Grid-borderWidth) solid',
+            borderColor: 'divider',
+          },
+        }}
+      >
+        {gridDetails.map((gridItem, index) => (
+          <>
+            <Grid2
+              container={false}
+              key={gridItem.name}
+              size={4}
+              sx={{
+                alignContent: 'center',
+                backgroundColor: index % 2 === 0 ? '#f5f5f5' : 'white',
+              }}
+            >
+              <Typography
+                variant="button"
+                fontWeight={'bold'}
+                sx={{ fontSize: '14px', padding: '6px' }}
+              >
+                {gridItem.name}
+              </Typography>
+            </Grid2>
+            <Grid2
+              container={false}
+              size={8}
+              sx={{
+                alignContent: 'center',
+                backgroundColor: index % 2 === 0 ? '#f5f5f5' : 'white',
+              }}
+            >
+              <Typography
+                variant="subtitle1"
+                sx={{ fontSize: '14px', padding: '6px' }}
+                className={clsx({
+                  'entitlements-grid-viewer__item-clickable-text': Boolean(
+                    gridItem.onClick,
+                  ),
+                  'entitlements-grid-viewer__status--success':
+                    gridItem.status === GridTiemStatus.SUCCESS,
+                  'entitlements-grid-viewer__status--error':
+                    gridItem.status === GridTiemStatus.ERROR,
+                  'entitlements-grid-viewer__status--in-progress':
+                    gridItem.status === GridTiemStatus.INFO,
+                })}
+                onClick={() => gridItem.onClick?.()}
+              >
+                {gridItem.value}
+              </Typography>
+            </Grid2>
+          </>
+        ))}
+      </Grid2>
+    </>
+  );
+};

package/src/{components → pages}/Lakehouse/subscriptions/LakehouseSubscriptions.tsx

@@ -36,9 +36,7 @@ import {
   Select,
   TextField,
   Typography,
-  type SelectChangeEvent,
 } from '@mui/material';
-import { LakehouseMarketplaceHeader } from '../LakehouseHeader.js';
 import {
   type V1_DataSubscriptionTarget,
   V1_DataSubscriptionTargetType,
@@ -53,6 +51,7 @@ import {
 import { assertErrorThrown } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import type { LakehouseSubscriptionsStore } from '../../../stores/lakehouse/subscriptions/LakehouseSubscriptionsStore.js';
+import { LegendMarketplacePage } from '../../LegendMarketplacePage.js';
 
 export const LakehouseSubscriptionsCreateDialog = (props: {
   open: boolean;
@@ -69,7 +68,7 @@ export const LakehouseSubscriptionsCreateDialog = (props: {
     V1_DataSubscriptionTargetType.Snowflake,
   );
   const [snowflakeAccountId, setSnowflakeAccountId] = useState<string>('');
-  const [snowflakeRegion, setSnowflakeRegion] = useState<V1_SnowflakeRegion>(
+  const [snowflakeRegion] = useState<V1_SnowflakeRegion>(
     V1_SnowflakeRegion.AWS_US_EAST_1,
   );
   const [snowflakeNetwork] = useState<V1_SnowflakeNetwork>(
@@ -152,9 +151,7 @@ export const LakehouseSubscriptionsCreateDialog = (props: {
             id="snowflake-region-select"
             value={snowflakeRegion}
             label="Snowflake Region"
-            onChange={(event: SelectChangeEvent<V1_SnowflakeRegion>) => {
-              setSnowflakeRegion(event.target.value as V1_SnowflakeRegion);
-            }}
+            disabled={true}
           >
             {Object.values(V1_SnowflakeRegion).map((region) => (
               <MenuItem key={region} value={region}>
@@ -344,27 +341,18 @@ export const LakehouseSubscriptions = withLakehouseSubscriptionsStore(
     }, [auth.user?.access_token, subscriptionsStore]);
 
     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={Boolean(
-                    subscriptionsStore.initializationState.isInProgress,
-                  )}
-                >
-                  <CubesLoadingIndicatorIcon />
-                </CubesLoadingIndicator>
-                <LakehouseSubscriptionsMainView
-                  subscriptionsStore={subscriptionsStore}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+      <LegendMarketplacePage className="legend-marketplace-lakehouse-subscriptions">
+        <CubesLoadingIndicator
+          isLoading={Boolean(
+            subscriptionsStore.initializationState.isInProgress,
+          )}
+        >
+          <CubesLoadingIndicatorIcon />
+        </CubesLoadingIndicator>
+        <LakehouseSubscriptionsMainView
+          subscriptionsStore={subscriptionsStore}
+        />
+      </LegendMarketplacePage>
     );
   }),
 );

package/src/pages/LegendMarketplacePage.tsx

@@ -0,0 +1,26 @@
+/**
+ * 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 { clsx } from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import type React from 'react';
+
+export const LegendMarketplacePage = observer(
+  (props: { className?: string; children: React.ReactNode }) => {
+    const { className, children } = props;
+    return <div className={clsx('app__page', className)}>{children}</div>;
+  },
+);

package/src/pages/SearchResults/LegendMarketplaceSearchResults.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 } from '../../__lib__/LegendMarketplaceNavigation.js';
 import { DataProductSearchResult } from '@finos/legend-server-marketplace';
@@ -30,6 +29,7 @@ import { assertErrorThrown } from '@finos/legend-shared';
 import { LegendMarketplaceSearchResultDrawerContent } from './LegendMarketplaceSearchResultDrawerContent.js';
 import { Drawer, Grid2 as Grid } from '@mui/material';
 import { LegendMarketplaceProductSearchCard } from '../../components/DataProductCard/LegendMarketplaceDataProductSearchCard.js';
+import { LegendMarketplacePage } from '../LegendMarketplacePage.js';
 
 export const LegendMarketplaceSearchResults = observer(() => {
   const applicationStore = useApplicationStore();
@@ -87,71 +87,64 @@ export const LegendMarketplaceSearchResults = observer(() => {
   };
 
   return (
-    <div className="app__page">
-      <div className="legend-marketplace-search-results">
-        <div className="legend-marketplace-search-results__body">
-          <LegendMarketplaceHeader />
-          <div className="legend-marketplace-search-results__content">
-            <div className="legend-marketplace-search-results__search-bar">
-              <LegendMarketplaceSearchBar
-                onSearch={onSearch}
-                initialValue={params.query?.trim() ?? ''}
-              />
-            </div>
-            <div className="legend-marketplace-search-results__results">
-              <CubesLoadingIndicator isLoading={isLoading}>
-                <CubesLoadingIndicatorIcon />
-              </CubesLoadingIndicator>
-              {isError ? (
-                <div>Error loading results</div>
-              ) : (
-                <Grid
-                  container={true}
-                  spacing={{ xs: 2, lg: 3, xl: 4 }}
-                  columns={{ xs: 1, sm: 2, lg: 3, xxl: 4, xxxl: 5, xxxxl: 6 }}
-                  className="legend-marketplace-search-results__results__cards"
-                >
-                  {results.map((result) => (
-                    <Grid
-                      key={`${result.vendor_name}-${result.data_product_name}`}
-                      size={1}
-                    >
-                      <LegendMarketplaceProductSearchCard
-                        productSearchResult={result}
-                        onPreviewClick={() => {
-                          setSelectedPreviewResult(result);
-                        }}
-                        onLearnMoreClick={() => {
-                          applicationStore.navigationService.navigator.visitAddress(
-                            result.data_product_link,
-                          );
-                        }}
-                      />
-                    </Grid>
-                  ))}
-                </Grid>
-              )}
-            </div>
-          </div>
-          <Drawer
-            anchor="right"
-            open={selectedPreviewResult !== undefined}
-            onClose={() => setSelectedPreviewResult(undefined)}
-            slotProps={{
-              paper: {
-                sx: {
-                  width: '40%',
-                  maxWidth: '100rem',
-                },
-              },
-            }}
+    <LegendMarketplacePage className="legend-marketplace-search-results">
+      <div className="legend-marketplace-search-results__search-bar">
+        <LegendMarketplaceSearchBar
+          onSearch={onSearch}
+          initialValue={params.query?.trim() ?? ''}
+        />
+      </div>
+      <div className="legend-marketplace-search-results__results">
+        <CubesLoadingIndicator isLoading={isLoading}>
+          <CubesLoadingIndicatorIcon />
+        </CubesLoadingIndicator>
+        {isError ? (
+          <div>Error loading results</div>
+        ) : (
+          <Grid
+            container={true}
+            spacing={{ xs: 4 }}
+            columns={{ xs: 1, sm: 2, lg: 3, xxl: 4, xxxl: 5, xxxxl: 6 }}
+            className="legend-marketplace-search-results__results__cards"
           >
-            <LegendMarketplaceSearchResultDrawerContent
-              productSearchResult={selectedPreviewResult}
-            />
-          </Drawer>
-        </div>
+            {results.map((result) => (
+              <Grid
+                key={`${result.vendor_name}-${result.data_product_name}`}
+                size={1}
+              >
+                <LegendMarketplaceProductSearchCard
+                  productSearchResult={result}
+                  onPreviewClick={() => {
+                    setSelectedPreviewResult(result);
+                  }}
+                  onLearnMoreClick={() => {
+                    applicationStore.navigationService.navigator.visitAddress(
+                      result.data_product_link,
+                    );
+                  }}
+                />
+              </Grid>
+            ))}
+          </Grid>
+        )}
       </div>
-    </div>
+      <Drawer
+        anchor="right"
+        open={selectedPreviewResult !== undefined}
+        onClose={() => setSelectedPreviewResult(undefined)}
+        slotProps={{
+          paper: {
+            sx: {
+              width: '40%',
+              maxWidth: '100rem',
+            },
+          },
+        }}
+      >
+        <LegendMarketplaceSearchResultDrawerContent
+          productSearchResult={selectedPreviewResult}
+        />
+      </Drawer>
+    </LegendMarketplacePage>
   );
 });

package/src/pages/VendorData/LegendMarketplaceVendorData.tsx

@@ -15,7 +15,6 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { LegendMarketplaceHeader } from '../../components/Header/LegendMarketplaceHeader.js';
 import { useEffect, useState } from 'react';
 import { LegendMarketplaceSearchBar } from '../../components/SearchBar/LegendMarketplaceSearchBar.js';
 import {
@@ -25,6 +24,7 @@ import {
   Checkbox,
   FormControlLabel,
   FormGroup,
+  Grid2 as Grid,
   Typography,
 } from '@mui/material';
 import { flowResult } from 'mobx';
@@ -33,6 +33,7 @@ import type { ProviderResult } from '@finos/legend-server-marketplace';
 import { LegendMarketplaceProviderCard } from '../../components/ProviderCard/LegendMarketplaceProviderCard.js';
 import type { LegendMarketPlaceVendorDataState } from '../../stores/LegendMarketPlaceVendorDataState.js';
 import { useLegendMarketplaceBaseStore } from '../../application/LegendMarketplaceFrameworkProvider.js';
+import { LegendMarketplacePage } from '../LegendMarketplacePage.js';
 
 export const RefinedVendorRadioSelector = observer(() => {
   const radioOptions = ['All', 'Datafeeds', 'Terminal License', 'Add-Ons'];
@@ -79,15 +80,21 @@ const SearchResultsRenderer = observer(
             <strong>See All&gt;</strong>
           </a>
         </div>
-        <div className="legend-marketplace-vendordata-main-search-results__card-group">
+        <Grid
+          container={true}
+          spacing={{ xs: 4 }}
+          columns={{ xs: 1, sm: 2, lg: 3, xxl: 4, xxxl: 5, xxxxl: 6 }}
+          className="legend-marketplace-vendordata-main-search-results__card-group"
+        >
           {providerResults.map((provider) => (
-            <LegendMarketplaceProviderCard
-              key={provider.id}
-              providerResult={provider}
-              onAddToCartClick={() => onAddToCartClick(provider)}
-            />
+            <Grid key={provider.id} size={1}>
+              <LegendMarketplaceProviderCard
+                providerResult={provider}
+                onAddToCartClick={() => onAddToCartClick(provider)}
+              />
+            </Grid>
           ))}
-        </div>
+        </Grid>
       </div>
     );
   },
@@ -163,41 +170,36 @@ export const LegendMarketPlaceVendorData = observer(() => {
   }, [marketPlaceVendorDataState, applicationStore]);
 
   return (
-    <div className="app__page">
-      <div className="legend-marketplace-vendor-data">
-        <LegendMarketplaceHeader />
-        <div className="legend-marketplace-vendor-data__content">
-          <div className="legend-marketplace-banner">
-            <div className="legend-marketplace-banner__title">Vendor Data</div>
-            <div className="legend-marketplace-banner__subtitle">
-              <p>Discover high quality data</p>
-            </div>
-          </div>
-          <div className="legend-marketplace-new-datasets">
-            <h3>Recently Onboarded</h3>
-            <div className="legend-marketplace-new-datasets__buttons">
-              {marketPlaceVendorDataState.dataFeedProviders
-                .slice(0, 10)
-                .map((vendor) => (
-                  <Badge
-                    className="legend-marketplace-new-datasets__providers"
-                    title={vendor.productName}
-                    key={vendor.id}
-                  >
-                    {vendor.productName}
-                  </Badge>
-                ))}
-            </div>
-          </div>
-          <div className="legend-marketplace-body__content">
-            <RefinedVendorRadioSelector />
-            <LegendMarketplaceSearchBar onSearch={onChange} />
-            <VendorDataMainContent
-              marketPlaceVendorDataState={marketPlaceVendorDataState}
-            />
-          </div>
+    <LegendMarketplacePage className="legend-marketplace-vendor-data">
+      <div className="legend-marketplace-banner">
+        <div className="legend-marketplace-banner__title">Vendor Data</div>
+        <div className="legend-marketplace-banner__subtitle">
+          <p>Discover high quality data</p>
+        </div>
+      </div>
+      <div className="legend-marketplace-new-datasets">
+        <h3>Recently Onboarded</h3>
+        <div className="legend-marketplace-new-datasets__buttons">
+          {marketPlaceVendorDataState.dataFeedProviders
+            .slice(0, 10)
+            .map((vendor) => (
+              <Badge
+                className="legend-marketplace-new-datasets__providers"
+                title={vendor.productName}
+                key={vendor.id}
+              >
+                {vendor.productName}
+              </Badge>
+            ))}
         </div>
       </div>
-    </div>
+      <div className="legend-marketplace-body__content">
+        <RefinedVendorRadioSelector />
+        <LegendMarketplaceSearchBar onSearch={onChange} />
+        <VendorDataMainContent
+          marketPlaceVendorDataState={marketPlaceVendorDataState}
+        />
+      </div>
+    </LegendMarketplacePage>
   );
 });

package/src/stores/LakehouseContractServerClient.ts

@@ -114,6 +114,7 @@ export class LakehouseContractServerClient extends AbstractServerClient {
   // ------------------------------------------- Tasks -------------------------------------------
 
   private _tasks = (): string => `${this.baseUrl}/datacontracts/tasks`;
+  private _contract_tasks = (): string => `${this._tasks()}/query/contract`;
 
   getPendingTasks = (
     user: string | undefined,
@@ -124,6 +125,34 @@ export class LakehouseContractServerClient extends AbstractServerClient {
     });
   };
 
+  getTask = (
+    taskId: string,
+    token: string | undefined,
+  ): Promise<PlainObject<V1_PendingTasksRespond>> => {
+    return this.get(
+      `${this._tasks()}/${encodeURIComponent(taskId)}`,
+      {},
+      this._token(token),
+      {
+        user: taskId,
+      },
+    );
+  };
+
+  getContractTasks = (
+    contractId: string,
+    token: string | undefined,
+  ): Promise<PlainObject<V1_PendingTasksRespond>> => {
+    return this.get(
+      `${this._contract_tasks()}/${encodeURIComponent(contractId)}`,
+      {},
+      this._token(token),
+      {
+        user: contractId,
+      },
+    );
+  };
+
   approveTask = (
     id: string,
     token: string | undefined,

package/src/stores/LegendMarketplaceBaseStore.ts

@@ -28,7 +28,11 @@ import {
 import { flow, makeObservable } from 'mobx';
 import { DepotServerClient } from '@finos/legend-server-depot';
 import { MarketplaceServerClient } from '@finos/legend-server-marketplace';
-import { getCurrentUserIDFromEngineServer } from '@finos/legend-graph';
+import {
+  getCurrentUserIDFromEngineServer,
+  type V1_EngineServerClient,
+  V1_RemoteEngine,
+} from '@finos/legend-graph';
 import type { LegendMarketplaceApplicationConfig } from '../application/LegendMarketplaceApplicationConfig.js';
 import type { LegendMarketplacePluginManager } from '../application/LegendMarketplacePluginManager.js';
 import { LegendMarketplaceEventHelper } from '../__lib__/LegendMarketplaceEventHelper.js';
@@ -46,6 +50,8 @@ export class LegendMarketplaceBaseStore {
   readonly depotServerClient: DepotServerClient;
   readonly lakehouseServerClient: LakehouseContractServerClient | undefined;
   readonly pluginManager: LegendMarketplacePluginManager;
+  readonly engineServerClient: V1_EngineServerClient;
+  readonly remoteEngine: V1_RemoteEngine;
 
   readonly initState = ActionState.create();
 
@@ -85,6 +91,15 @@ export class LegendMarketplaceBaseStore {
       );
     }
 
+    this.remoteEngine = new V1_RemoteEngine(
+      {
+        baseUrl: this.applicationStore.config.engineServerUrl,
+      },
+      applicationStore.logService,
+    );
+    this.engineServerClient = this.remoteEngine.getEngineServerClient();
+    this.engineServerClient.setTracerService(applicationStore.tracerService);
+
     this.marketplaceVendorDataState = new LegendMarketPlaceVendorDataState(
       this.applicationStore,
       this,