@finos/legend-application-marketplace
Version:
Legend Marketplace application core
170 lines • 18 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
* 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 React, { useEffect, useState } from 'react';
import { clsx, CubesLoadingIndicator, CubesLoadingIndicatorIcon, deserializeIcon, ExpandMoreIcon, InfoCircleIcon, OpenIcon, } from '@finos/legend-art';
import { Box, Button, Checkbox, Chip, Container, FormControlLabel, FormGroup, FormLabel, Grid2 as Grid, IconButton, Menu, MenuItem, Popover, Table, TableBody, TableCell, TableContainer, TableRow, } from '@mui/material';
import { DataProductFilterType, DataProductSort, DeployType, } from '../../stores/lakehouse/MarketplaceLakehouseStore.js';
import { generateLakehouseDataProductPath, generateLakehouseSandboxDataProductPath, } from '../../__lib__/LegendMarketplaceNavigation.js';
import { generateGAVCoordinates } from '@finos/legend-storage';
import { LegendMarketplaceSearchBar } from '../../components/SearchBar/LegendMarketplaceSearchBar.js';
import { isSnapshotVersion } from '@finos/legend-server-depot';
import { LegendMarketplaceCard } from '../../components/MarketplaceCard/LegendMarketplaceCard.js';
import { LegendMarketplacePage } from '../LegendMarketplacePage.js';
import { EXTERNAL_APPLICATION_NAVIGATION__generateStudioProjectViewUrl } from '@finos/legend-application';
import { useAuth } from 'react-oidc-context';
import { DataProductState, SandboxDataProductState, } from '../../stores/lakehouse/dataProducts/DataProducts.js';
import { guaranteeNonNullable } from '@finos/legend-shared';
import { ELEMENT_PATH_DELIMITER, V1_IngestEnvironmentClassification, } from '@finos/legend-graph';
const MAX_DESCRIPTION_LENGTH = 250;
const LakehouseDataProductCardInfoPopover = observer((props) => {
const { dataProductEntity, popoverAnchorEl, setPopoverAnchorEl, applicationStore, } = props;
const popoverOpen = Boolean(popoverAnchorEl);
const popoverId = popoverOpen ? 'popover' : undefined;
return (_jsxs(Popover, { id: popoverId, open: popoverOpen, anchorEl: popoverAnchorEl, anchorOrigin: {
vertical: 'top',
horizontal: 'center',
}, transformOrigin: {
vertical: 'bottom',
horizontal: 'center',
}, onClose: () => setPopoverAnchorEl(null), slotProps: {
paper: {
className: 'marketplace-lakehouse-data-product-card__popover',
onClick: (event) => [
event.preventDefault(),
event.stopPropagation(),
],
},
backdrop: {
onClick: (event) => {
event.preventDefault();
event.stopPropagation();
},
},
}, children: [_jsx("div", { className: "marketplace-lakehouse-data-product-card__popover__name", children: dataProductEntity.product?.title ??
dataProductEntity.path.split(ELEMENT_PATH_DELIMITER).pop() }), _jsx("div", { className: "marketplace-lakehouse-data-product-card__popover__description-label", children: "Description" }), _jsx("div", { className: "marketplace-lakehouse-data-product-card__popover__description", children: dataProductEntity.product?.description }), _jsx("hr", {}), _jsxs("div", { className: "marketplace-lakehouse-data-product-card__popover__project-table-header", children: ["Data Product Project", _jsx(IconButton, { className: "marketplace-lakehouse-data-product-card__popover__project-link", onClick: () => applicationStore.navigationService.navigator.visitAddress(EXTERNAL_APPLICATION_NAVIGATION__generateStudioProjectViewUrl(applicationStore.config.studioServerUrl, dataProductEntity.groupId, dataProductEntity.artifactId, dataProductEntity.versionId, dataProductEntity.path)), children: _jsx(OpenIcon, {}) })] }), _jsx(TableContainer, { className: "marketplace-lakehouse-data-product-card__popover__project-table", children: _jsx(Table, { children: _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx("b", { children: "Group" }) }), _jsx(TableCell, { children: dataProductEntity.groupId })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx("b", { children: "Artifact" }) }), _jsx(TableCell, { children: dataProductEntity.artifactId })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx("b", { children: "Version" }) }), _jsx(TableCell, { children: dataProductEntity.versionId })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx("b", { children: "Path" }) }), _jsx(TableCell, { children: dataProductEntity.path })] })] }) }) })] }));
});
export const LakehouseDataProductCard = observer((props) => {
const { dataProductState, onClick } = props;
const [popoverAnchorEl, setPopoverAnchorEl] = useState(null);
const [versionMenuAnchorEl, setVersionMenuAnchorEl] = useState(null);
const isVersionMenuOpen = Boolean(versionMenuAnchorEl);
if (!dataProductState.isInitialized) {
return null;
}
const truncatedDescription = dataProductState.description &&
dataProductState.description.length > MAX_DESCRIPTION_LENGTH
? `${dataProductState.description.substring(0, MAX_DESCRIPTION_LENGTH)}...`
: dataProductState.description;
const versionId = dataProductState instanceof DataProductState
? dataProductState.versionId
: undefined;
const isSnapshot = versionId ? isSnapshotVersion(versionId) : undefined;
const environmentClassification = dataProductState instanceof SandboxDataProductState &&
dataProductState.dataProductArtifact?.dataProduct.deploymentId
? dataProductState.state.lakehouseIngestEnvironmentsByDID.get(dataProductState.dataProductArtifact.dataProduct.deploymentId)?.environmentClassification
: undefined;
const isLoading = dataProductState.isLoading;
const content = isLoading ? (_jsx(CubesLoadingIndicator, { isLoading: isLoading, children: _jsx(CubesLoadingIndicatorIcon, {}) })) : (_jsx(_Fragment, { children: _jsxs(Box, { className: "marketplace-lakehouse-data-product-card__container", children: [_jsx(Box, { className: "marketplace-lakehouse-data-product-card__icon", children: dataProductState.imageUrl ? (_jsx("img", { src: dataProductState.imageUrl })) : (deserializeIcon(dataProductState.icon)) }), _jsxs(Box, { className: "marketplace-lakehouse-data-product-card__content", children: [versionId !== undefined && versionId !== '' && (_jsxs(_Fragment, { children: [_jsxs(Button, { size: "small", onClick: (event) => {
event.preventDefault();
event.stopPropagation();
setVersionMenuAnchorEl(event.currentTarget);
}, className: clsx('marketplace-lakehouse-data-product-card__version', {
'marketplace-lakehouse-data-product-card__version--snapshot': isSnapshot,
'marketplace-lakehouse-data-product-card__version--release': !isSnapshot,
}), children: [versionId, _jsx(ExpandMoreIcon, {})] }), _jsx(Menu, { anchorEl: versionMenuAnchorEl, open: isVersionMenuOpen, onClose: () => setVersionMenuAnchorEl(null), slotProps: {
backdrop: {
onClick: (event) => {
event.preventDefault();
event.stopPropagation();
},
},
}, anchorOrigin: {
horizontal: 'right',
vertical: 'bottom',
}, transformOrigin: {
horizontal: 'right',
vertical: 'top',
}, children: Array.from(dataProductState.versionOptions.map((versionOption) => {
return (_jsx(MenuItem, { onClick: (event) => {
event.preventDefault();
event.stopPropagation();
dataProductState.setSelectedVersion(versionOption);
setVersionMenuAnchorEl(null);
}, children: versionOption }, versionOption));
})) })] })), environmentClassification !== undefined && (_jsx(Chip, { label: environmentClassification, size: "small", className: clsx('marketplace-lakehouse-data-product-card__environment-classification', {
'marketplace-lakehouse-data-product-card__environment-classification--dev': environmentClassification ===
V1_IngestEnvironmentClassification.DEV,
'marketplace-lakehouse-data-product-card__environment-classification--prod-parallel': environmentClassification ===
V1_IngestEnvironmentClassification.PROD_PARALLEL,
'marketplace-lakehouse-data-product-card__environment-classification--prod': environmentClassification ===
V1_IngestEnvironmentClassification.PROD,
}) })), _jsx(Box, { className: "marketplace-lakehouse-data-product-card__name", children: dataProductState.title }), _jsx(Box, { className: "marketplace-lakehouse-data-product-card__description", children: truncatedDescription })] }), dataProductState instanceof DataProductState && (_jsxs(_Fragment, { children: [_jsx(IconButton, { onClick: (event) => {
event.preventDefault();
event.stopPropagation();
setPopoverAnchorEl(event.currentTarget);
}, className: clsx('marketplace-lakehouse-data-product-card__more-info-btn', {
'marketplace-lakehouse-data-product-card__more-info-btn--selected': Boolean(popoverAnchorEl),
}), children: _jsx(InfoCircleIcon, {}) }), _jsx(LakehouseDataProductCardInfoPopover, { dataProductEntity: guaranteeNonNullable(dataProductState.currentProductEntity), popoverAnchorEl: popoverAnchorEl, setPopoverAnchorEl: setPopoverAnchorEl, applicationStore: dataProductState.state.applicationStore })] }))] }) }));
return (_jsx(LegendMarketplaceCard, { size: "large", content: content, onClick: () => onClick(dataProductState), className: "marketplace-lakehouse-data-product-card" }));
});
const MarketplaceLakehouseHomeSortFilterPanel = observer((props) => {
const { marketPlaceStore } = props;
const [sortMenuAnchorEl, setSortMenuAnchorEl] = useState(null);
const isSortMenuOpen = Boolean(sortMenuAnchorEl);
return (_jsxs(Box, { className: "marketplace-lakehouse-home__sort-filters", children: [_jsxs(Box, { className: "marketplace-lakehouse-home__sort-filters__sort", children: ["Sort By", _jsxs(Box, { children: [_jsxs(Button, { onClick: (event) => {
setSortMenuAnchorEl(event.currentTarget);
}, className: "marketplace-lakehouse-home__sort-filters__sort__btn", children: [marketPlaceStore.sort, _jsx(ExpandMoreIcon, {})] }), _jsx(Menu, { anchorEl: sortMenuAnchorEl, open: isSortMenuOpen, onClose: () => setSortMenuAnchorEl(null), anchorOrigin: {
horizontal: 'left',
vertical: 'bottom',
}, transformOrigin: {
horizontal: 'left',
vertical: 'top',
}, children: Object.values(DataProductSort).map((sortValue) => {
return (_jsx(MenuItem, { onClick: (event) => {
marketPlaceStore.setSort(sortValue);
setSortMenuAnchorEl(null);
}, children: sortValue }, sortValue));
}) })] })] }), _jsxs(Box, { className: "marketplace-lakehouse-home__sort-filters__filter", children: ["Filter By", _jsxs(Box, { children: [_jsx(FormLabel, { children: "Deploy Type" }), _jsxs(FormGroup, { children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: marketPlaceStore.filter.sdlcDeployFilter, onChange: () => marketPlaceStore.handleFilterChange(DataProductFilterType.DEPLOY_TYPE, DeployType.SDLC) }), label: "SDLC Deployed" }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: marketPlaceStore.filter.sandboxDeployFilter, onChange: () => marketPlaceStore.handleFilterChange(DataProductFilterType.DEPLOY_TYPE, DeployType.SANDBOX) }), label: "Sandbox Deployed" })] })] }), _jsx("hr", {}), _jsxs(Box, { children: [_jsx(FormLabel, { children: "Deploy Environment" }), _jsxs(FormGroup, { children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: marketPlaceStore.filter.devEnvironmentClassificationFilter, onChange: () => marketPlaceStore.handleFilterChange(DataProductFilterType.ENVIRONMENT_CLASSIFICATION, V1_IngestEnvironmentClassification.DEV) }), label: "Dev" }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: marketPlaceStore.filter
.prodParallelEnvironmentClassificationFilter, onChange: () => marketPlaceStore.handleFilterChange(DataProductFilterType.ENVIRONMENT_CLASSIFICATION, V1_IngestEnvironmentClassification.PROD_PARALLEL) }), label: "Prod-Parallel" }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: marketPlaceStore.filter
.prodEnvironmentClassificationFilter, onChange: () => marketPlaceStore.handleFilterChange(DataProductFilterType.ENVIRONMENT_CLASSIFICATION, V1_IngestEnvironmentClassification.PROD) }), label: "Prod" })] })] })] })] }));
});
export const MarketplaceLakehouseHome = withMarketplaceLakehouseStore(observer(() => {
const marketPlaceStore = useMarketplaceLakehouseStore();
const auth = useAuth();
const onSearchChange = (query) => {
marketPlaceStore.handleSearch(query);
};
useEffect(() => {
marketPlaceStore.init(auth);
}, [marketPlaceStore, auth]);
const isLoadingDataProducts = marketPlaceStore.loadingProductsState.isInProgress ||
marketPlaceStore.loadingSandboxDataProductStates.isInProgress ||
marketPlaceStore.loadingLakehouseEnvironmentsByDIDState.isInProgress;
return (_jsxs(LegendMarketplacePage, { className: "marketplace-lakehouse-home", children: [_jsxs(Container, { className: "marketplace-lakehouse-home__search-container", children: [_jsx(Box, { className: "marketplace-lakehouse-home__search-container__title", children: "Legend Marketplace" }), _jsx(LegendMarketplaceSearchBar, { onChange: onSearchChange, placeholder: "Search Legend Marketplace", className: "marketplace-lakehouse-home__search-bar" })] }), _jsxs(Container, { maxWidth: "xxxl", className: "marketplace-lakehouse-home__results-container", children: [_jsx(MarketplaceLakehouseHomeSortFilterPanel, { marketPlaceStore: marketPlaceStore }), _jsxs(Grid, { container: true, spacing: { xs: 2, sm: 3, xxl: 4 }, columns: { xs: 1, sm: 2, xxl: 3 }, className: "marketplace-lakehouse-home__data-product-cards", children: [marketPlaceStore.filterSortProducts?.map((dpState) => (_jsx(Grid, { size: 1, children: _jsx(LakehouseDataProductCard, { dataProductState: dpState, onClick: (dataProductState) => {
if (dataProductState instanceof DataProductState &&
dataProductState.currentProductEntity) {
marketPlaceStore.applicationStore.navigationService.navigator.goToLocation(generateLakehouseDataProductPath(generateGAVCoordinates(dataProductState.currentProductEntity.groupId, dataProductState.currentProductEntity.artifactId, dataProductState.currentProductEntity.versionId), dataProductState.currentProductEntity.path));
}
else if (dataProductState instanceof SandboxDataProductState) {
marketPlaceStore.applicationStore.navigationService.navigator.goToLocation(generateLakehouseSandboxDataProductPath(encodeURIComponent(dataProductState.ingestEnvironmentUrn), encodeURIComponent(dataProductState.dataProductArtifact?.dataProduct
.path ?? '')));
}
} }) }, dpState.id))), isLoadingDataProducts && (_jsx(Grid, { size: 1, children: _jsx(CubesLoadingIndicator, { isLoading: true, className: "marketplace-lakehouse-home__loading-data-products-indicator", children: _jsx(CubesLoadingIndicatorIcon, {}) }) }))] })] })] }));
}));
//# sourceMappingURL=MarketplaceLakehouseHome.js.map