@finos/legend-application-marketplace 0.0.20 → 0.0.21

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>
+    );
+  }),
+);

package/src/{components/Lakehouse/entitlements/LakehouseEntitlements.tsx → pages/Lakehouse/entitlements/EntitlementsDashboard.tsx}

@@ -14,48 +14,26 @@
  * limitations under the License.
  */
 
+import { withAuth, type AuthContextProps } from 'react-oidc-context';
+import type { EntitlementsDashboardState } from '../../../stores/lakehouse/entitlements/EntitlementsDashboardState.js';
 import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
 import {
-  useLakehouseEntitlementsStore,
-  withLakehouseEntitlementsStore,
-} from './LakehouseEntitlementsStoreProvider.js';
-import { useAuth, withAuth, type AuthContextProps } from 'react-oidc-context';
-import { useEffect, useState } from 'react';
-import {
-  clsx,
-  CubesLoadingIndicator,
-  CubesLoadingIndicatorIcon,
-} from '@finos/legend-art';
+  V1_UserApprovalStatus,
+  type V1_ContractUserEventRecord,
+  type V1_UserPendingContractsRecord,
+} from '@finos/legend-graph';
+import { flowResult } from 'mobx';
 import {
   DataGrid,
   type DataGridCellRendererParams,
 } from '@finos/legend-lego/data-grid';
-import { useParams } from '@finos/legend-application/browser';
 import {
   generateLakehouseContractPath,
   generateLakehouseTaskPath,
-  LEGEND_MARKETPLACE_ROUTE_PATTERN_TOKEN,
-  type LakehouseEntitlementsTasksParam,
 } from '../../../__lib__/LegendMarketplaceNavigation.js';
-import {
-  Box,
-  Button,
-  Divider,
-  Grid2,
-  Stack,
-  Tab,
-  Tabs,
-  Typography,
-} from '@mui/material';
-import { LakehouseMarketplaceHeader } from '../LakehouseHeader.js';
-import type {
-  V1_ContractUserEventRecord,
-  V1_UserPendingContractsRecord,
-} from '@finos/legend-graph';
-import { flowResult } from 'mobx';
-import { DataContractState } from '../../../stores/lakehouse/entitlements/DataContractState.js';
-import { LakehouseEntitlementsMainViewState } from '../../../stores/lakehouse/entitlements/LakehouseEntitlementsMainViewState.js';
-import { DataContractTaskState } from '../../../stores/lakehouse/entitlements/DataContractTaskState.js';
+import { Box, Button, Stack, Tab, Tabs, Typography } from '@mui/material';
+import { clsx } from '@finos/legend-art';
 
 const TDSColumnApprovalCellRenderer = (
   params: DataGridCellRendererParams<V1_ContractUserEventRecord>,
@@ -78,11 +56,18 @@ const TDSColumnApprovalCellRenderer = (
         variant="contained"
         size="small"
         onClick={onApprove}
+        disabled={data.status !== V1_UserApprovalStatus.PENDING}
         color="success"
       >
         Approve
       </Button>
-      <Button color="error" variant="contained" size="small" onClick={onDeny}>
+      <Button
+        disabled={data.status !== V1_UserApprovalStatus.PENDING}
+        color="error"
+        variant="contained"
+        size="small"
+        onClick={onDeny}
+      >
         Deny
       </Button>
     </Stack>
@@ -174,10 +159,10 @@ const PendingContract_TaskIdColumnClickableCellRenderer = (
 };
 
 type TaksProps = {
-  currentViewer: LakehouseEntitlementsMainViewState;
+  currentViewer: EntitlementsDashboardState;
 };
 
-export const LakehouseEntitlementsMainView = withAuth(
+export const EntitlementsDashboard = withAuth(
   observer((props: TaksProps) => {
     const { currentViewer } = props;
     const state = currentViewer.state;
@@ -209,7 +194,6 @@ export const LakehouseEntitlementsMainView = withAuth(
     };
     return (
       <>
-        {/* <Box> */}
         <Tabs value={value} onChange={handleTabChange}>
           <Tab
             label={
@@ -404,214 +388,3 @@ export const LakehouseEntitlementsMainView = withAuth(
     );
   }),
 );
-const LakehouseEntitlementsContract = observer(
-  (props: { currentViewer: DataContractState }) => {
-    const { currentViewer } = props;
-    return (
-      <div className="entitlements-tasks">
-        <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',
-            },
-          }}
-        >
-          {currentViewer.taskDetails.map((v, index) => (
-            <>
-              <Grid2
-                container={false}
-                size={4}
-                sx={{
-                  alignContent: 'center',
-                  backgroundColor: index % 2 === 0 ? '#f5f5f5' : 'white',
-                }}
-              >
-                <Typography
-                  variant="button"
-                  fontWeight={'bold'}
-                  sx={{ fontSize: '14px', padding: '6px' }}
-                >
-                  {v.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' }}
-                >
-                  {v.value}
-                </Typography>
-              </Grid2>
-            </>
-          ))}
-        </Grid2>
-      </div>
-    );
-  },
-);
-
-export const LakehouseEntitlementsTask = withAuth(
-  observer((props: { currentViewer: DataContractTaskState }) => {
-    const auth = (props as unknown as { auth: AuthContextProps }).auth;
-    const { currentViewer } = props;
-    const handleApprove = (): void => {
-      currentViewer.approve(auth.user?.access_token);
-    };
-
-    const handleDeny = (): void => {
-      currentViewer.deny(auth.user?.access_token);
-    };
-
-    return (
-      <div className="entitlements-task">
-        {currentViewer.canApprove && (
-          <>
-            <Stack
-              className="entitlements-task__action"
-              direction={'row'}
-              spacing={1}
-            >
-              <Button
-                variant="contained"
-                size="small"
-                onClick={handleApprove}
-                color="success"
-                sx={{ fontSize: '10px' }}
-              >
-                Approve
-              </Button>
-              <Button
-                color="error"
-                variant="contained"
-                size="small"
-                onClick={handleDeny}
-                sx={{ fontSize: '10px' }}
-              >
-                Deny
-              </Button>
-            </Stack>
-            <Divider />
-          </>
-        )}
-        <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',
-            },
-          }}
-        >
-          {currentViewer.taskDetails.map((v, index) => (
-            <>
-              <Grid2
-                container={false}
-                size={4}
-                sx={{
-                  alignContent: 'center',
-                  backgroundColor: index % 2 === 0 ? '#f5f5f5' : 'white',
-                }}
-              >
-                <Typography
-                  variant="button"
-                  fontWeight={'bold'}
-                  sx={{ fontSize: '14px', padding: '6px' }}
-                >
-                  {v.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' }}
-                >
-                  {v.value}
-                </Typography>
-              </Grid2>
-            </>
-          ))}
-        </Grid2>
-      </div>
-    );
-  }),
-);
-
-export const LakehouseEntitlements = withLakehouseEntitlementsStore(
-  observer(() => {
-    const entitlementsStore = useLakehouseEntitlementsStore();
-    const auth = useAuth();
-    const params = useParams<LakehouseEntitlementsTasksParam>();
-
-    useEffect(() => {
-      entitlementsStore.init(
-        params[LEGEND_MARKETPLACE_ROUTE_PATTERN_TOKEN.TASK_ID],
-        params[LEGEND_MARKETPLACE_ROUTE_PATTERN_TOKEN.CONTRACT_ID],
-        auth.user?.access_token,
-      );
-    }, [auth.user?.access_token, entitlementsStore, params]);
-
-    const renderCurrentViewer = (): React.ReactNode => {
-      const currentViewer = entitlementsStore.currentViewer;
-      if (currentViewer instanceof LakehouseEntitlementsMainViewState) {
-        return <LakehouseEntitlementsMainView currentViewer={currentViewer} />;
-      } else if (currentViewer instanceof DataContractTaskState) {
-        return <LakehouseEntitlementsTask currentViewer={currentViewer} />;
-      } else if (currentViewer instanceof DataContractState) {
-        return <LakehouseEntitlementsContract currentViewer={currentViewer} />;
-      }
-
-      return null;
-    };
-    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(
-                    entitlementsStore.initializationState.isInProgress ||
-                      entitlementsStore.currentViewer?.initializationState
-                        .isInProgress,
-                  )}
-                >
-                  <CubesLoadingIndicatorIcon />
-                </CubesLoadingIndicator>
-                {renderCurrentViewer()}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }),
-);

package/src/pages/Lakehouse/entitlements/EntitlementsDataContractViewer.tsx

@@ -0,0 +1,33 @@
+/**
+ * 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 { GridItemsViewer } from '../shared/GridItemViewer.js';
+import type { EntitlementsDataContractViewerState } from '../../../stores/lakehouse/entitlements/EntitlementsDataContractViewerState.js';
+
+export const EntitlementsDataContractViewer = observer(
+  (props: { currentViewer: EntitlementsDataContractViewerState }) => {
+    const { currentViewer } = props;
+    return (
+      <div className="entitlements-grid-viewer">
+        <GridItemsViewer
+          details={currentViewer.contractDetails}
+          title="Contract Metadata"
+        />
+      </div>
+    );
+  },
+);

package/src/pages/Lakehouse/entitlements/EntitlementsTaskViewer.tsx

@@ -0,0 +1,73 @@
+/**
+ * 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 { withAuth, type AuthContextProps } from 'react-oidc-context';
+import type { EntitlementsTaskViewerState } from '../../../stores/lakehouse/entitlements/EntitlementsTaskViewerState.js';
+import { observer } from 'mobx-react-lite';
+import { GridItemsViewer } from '../shared/GridItemViewer.js';
+import { Button, Divider, Stack } from '@mui/material';
+
+export const EntitlementsTaskViewer = withAuth(
+  observer((props: { currentViewer: EntitlementsTaskViewerState }) => {
+    const auth = (props as unknown as { auth: AuthContextProps }).auth;
+    const { currentViewer } = props;
+    const handleApprove = (): void => {
+      currentViewer.approve(auth.user?.access_token);
+    };
+
+    const handleDeny = (): void => {
+      currentViewer.deny(auth.user?.access_token);
+    };
+
+    return (
+      <div className="entitlements-grid-viewer">
+        {currentViewer.canApprove && (
+          <div className="entitlements-grid-viewer__action-header">
+            <Stack
+              className="entitlements-grid-viewer__action"
+              direction={'row'}
+              spacing={1}
+            >
+              <Button
+                variant="contained"
+                size="small"
+                onClick={handleApprove}
+                color="success"
+                sx={{ fontSize: '10px' }}
+              >
+                Approve
+              </Button>
+              <Button
+                color="error"
+                variant="contained"
+                size="small"
+                onClick={handleDeny}
+                sx={{ fontSize: '10px' }}
+              >
+                Deny
+              </Button>
+            </Stack>
+            <Divider />
+          </div>
+        )}
+        <GridItemsViewer
+          details={currentViewer.taskDetails}
+          title="Task Metadata"
+        />
+      </div>
+    );
+  }),
+);

package/src/pages/Lakehouse/entitlements/LakehouseEntitlements.tsx

@@ -0,0 +1,82 @@
+/**
+ * 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 {
+  useLakehouseEntitlementsStore,
+  withLakehouseEntitlementsStore,
+} from './LakehouseEntitlementsStoreProvider.js';
+import { useAuth } from 'react-oidc-context';
+import { useEffect } from 'react';
+import {
+  CubesLoadingIndicator,
+  CubesLoadingIndicatorIcon,
+} from '@finos/legend-art';
+import {} from '@finos/legend-lego/data-grid';
+import { useParams } from '@finos/legend-application/browser';
+import {
+  LEGEND_MARKETPLACE_ROUTE_PATTERN_TOKEN,
+  type LakehouseEntitlementsTasksParam,
+} from '../../../__lib__/LegendMarketplaceNavigation.js';
+import { EntitlementsDashboardState } from '../../../stores/lakehouse/entitlements/EntitlementsDashboardState.js';
+import { EntitlementsTaskViewerState } from '../../../stores/lakehouse/entitlements/EntitlementsTaskViewerState.js';
+import { LegendMarketplacePage } from '../../LegendMarketplacePage.js';
+import { EntitlementsDataContractViewer } from './EntitlementsDataContractViewer.js';
+import { EntitlementsTaskViewer } from './EntitlementsTaskViewer.js';
+import { EntitlementsDashboard } from './EntitlementsDashboard.js';
+import { EntitlementsDataContractViewerState } from '../../../stores/lakehouse/entitlements/EntitlementsDataContractViewerState.js';
+
+export const LakehouseEntitlements = withLakehouseEntitlementsStore(
+  observer(() => {
+    const entitlementsStore = useLakehouseEntitlementsStore();
+    const auth = useAuth();
+    const params = useParams<LakehouseEntitlementsTasksParam>();
+
+    useEffect(() => {
+      entitlementsStore.init(
+        params[LEGEND_MARKETPLACE_ROUTE_PATTERN_TOKEN.TASK_ID],
+        params[LEGEND_MARKETPLACE_ROUTE_PATTERN_TOKEN.CONTRACT_ID],
+        auth.user?.access_token,
+      );
+    }, [auth.user?.access_token, entitlementsStore, params]);
+
+    const renderCurrentViewer = (): React.ReactNode => {
+      const currentViewer = entitlementsStore.currentViewer;
+      if (currentViewer instanceof EntitlementsDashboardState) {
+        return <EntitlementsDashboard currentViewer={currentViewer} />;
+      } else if (currentViewer instanceof EntitlementsTaskViewerState) {
+        return <EntitlementsTaskViewer currentViewer={currentViewer} />;
+      } else if (currentViewer instanceof EntitlementsDataContractViewerState) {
+        return <EntitlementsDataContractViewer currentViewer={currentViewer} />;
+      }
+
+      return null;
+    };
+    return (
+      <LegendMarketplacePage className="legend-marketplace-lakehouse-entitlements">
+        <CubesLoadingIndicator
+          isLoading={Boolean(
+            entitlementsStore.initializationState.isInProgress ||
+              entitlementsStore.currentViewer?.initializationState.isInProgress,
+          )}
+        >
+          <CubesLoadingIndicatorIcon />
+        </CubesLoadingIndicator>
+        {renderCurrentViewer()}
+      </LegendMarketplacePage>
+    );
+  }),
+);