@finos/legend-application-marketplace
Version:
Legend Marketplace application core
119 lines • 13.8 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Copyright (c) 2025-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 { LegendMarketplacePage } from '../LegendMarketplacePage.js';
import { useLegendMarketplaceDataAPIsStore, withLegendMarketplaceDataAPIsStore, } from '../../application/providers/LegendMarketplaceDataAPIsStoreProvider.js';
import { useCallback, useEffect, useRef } from 'react';
import { flowResult } from 'mobx';
import { CheckIcon, CubesLoadingIndicator, CubesLoadingIndicatorIcon, StarIcon, TableIcon, ViewHeadlineIcon, WindowIcon, clsx, } from '@finos/legend-art';
import { Container, FormControl, FormControlLabel, Grid, IconButton, MenuItem, Select, Switch, Typography, } from '@mui/material';
import { LegendServiceSort, ServicesViewMode, } from '../../stores/dataAPIs/LegendMarketplaceDataAPIsStore.js';
import { LegendServiceCard } from '../../components/LegendServiceCard/LegendServiceCard.js';
import { LegendServiceListRow } from '../../components/LegendServiceCard/LegendServiceListRow.js';
import { LegendServiceGridView } from '../../components/LegendServiceCard/LegendServiceGrid.js';
import { PaginationControls } from '../../components/Pagination/PaginationControls.js';
import { DataAPIsFiltersPanel } from '../../components/DataAPIsFiltersPanel/DataAPIsFiltersPanel.js';
import { useSearchParams } from '@finos/legend-application/browser';
import { LEGEND_MARKETPLACE_DATA_APIS_QUERY_PARAM_TOKEN } from '../../__lib__/LegendMarketplaceNavigation.js';
import { LegendMarketplaceSearchBar } from '../../components/SearchBar/LegendMarketplaceSearchBar.js';
import { LegendMarketplaceTelemetryHelper } from '../../__lib__/LegendMarketplaceTelemetryHelper.js';
export const LegendMarketplaceDataAPIs = withLegendMarketplaceDataAPIsStore(observer(() => {
const dataAPIsStore = useLegendMarketplaceDataAPIsStore();
const applicationStore = dataAPIsStore.marketplaceBaseStore.applicationStore;
const [searchParams, setSearchParams] = useSearchParams();
const { viewMode } = dataAPIsStore;
const pageRef = useRef(null);
const queryFromUrl = searchParams.get(LEGEND_MARKETPLACE_DATA_APIS_QUERY_PARAM_TOKEN.QUERY);
useEffect(() => {
if (queryFromUrl) {
dataAPIsStore.setSearchQuery(queryFromUrl);
}
flowResult(dataAPIsStore.fetchAllServices()).catch(applicationStore.alertUnhandledError);
}, [dataAPIsStore, applicationStore, queryFromUrl]);
const handlePageChange = useCallback((page) => {
dataAPIsStore.setPage(page);
pageRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [dataAPIsStore]);
const handleItemsPerPageChange = useCallback((itemsPerPage) => {
dataAPIsStore.setItemsPerPage(itemsPerPage);
}, [dataAPIsStore]);
const handleSearch = useCallback((query) => {
dataAPIsStore.setSearchQuery(query ?? '');
if (query) {
LegendMarketplaceTelemetryHelper.logEvent_SearchServices(applicationStore.telemetryService, query);
}
setSearchParams((prev) => {
const next = new URLSearchParams(prev);
if (query) {
next.set(LEGEND_MARKETPLACE_DATA_APIS_QUERY_PARAM_TOKEN.QUERY, query);
}
else {
next.delete(LEGEND_MARKETPLACE_DATA_APIS_QUERY_PARAM_TOKEN.QUERY);
}
return next;
});
}, [dataAPIsStore, setSearchParams, applicationStore]);
const handleServiceClick = useCallback((serviceCardState) => {
LegendMarketplaceTelemetryHelper.logEvent_ClickServiceCard(applicationStore.telemetryService, serviceCardState.service.pattern, serviceCardState.title);
const legendServicesUrl = dataAPIsStore.marketplaceBaseStore.applicationStore.config
.legendServicesUrl;
if (legendServicesUrl) {
const encodedPattern = serviceCardState.service.pattern
.replace(/^\//, '')
.replaceAll('/', '%2F');
applicationStore.navigationService.navigator.visitAddress(`${legendServicesUrl}/${encodedPattern}`);
}
}, [dataAPIsStore, applicationStore]);
const renderServiceView = () => {
switch (viewMode) {
case ServicesViewMode.LIST:
return (_jsxs(_Fragment, { children: [_jsx("div", { className: "marketplace-alloy-service-list", children: dataAPIsStore.paginatedServices.map((serviceCardState) => (_jsx(LegendServiceListRow, { serviceCardState: serviceCardState, onClick: () => handleServiceClick(serviceCardState), isFavorite: dataAPIsStore.isFavorite(serviceCardState.service.pattern), onToggleFavorite: () => dataAPIsStore.toggleFavorite(serviceCardState.service.pattern) }, serviceCardState.guid))) }), dataAPIsStore.isLoading && (_jsx(CubesLoadingIndicator, { isLoading: true, className: "marketplace-lakehouse-search-results__loading-data-products-indicator", children: _jsx(CubesLoadingIndicatorIcon, {}) }))] }));
case ServicesViewMode.GRID:
return (_jsx(LegendServiceGridView, { services: dataAPIsStore.filteredSortedServices, store: dataAPIsStore, onRowClick: handleServiceClick }));
case ServicesViewMode.TILE:
return (_jsxs(Grid, { container: true, spacing: { xs: 2, sm: 3, xxl: 4 }, columns: { sm: 1, md: 2, lg: 3, xxl: 4 }, className: "marketplace-lakehouse-search-results__data-product-cards", children: [dataAPIsStore.paginatedServices.map((serviceCardState) => (_jsx(Grid, { size: 1, children: _jsx(LegendServiceCard, { serviceCardState: serviceCardState, onClick: () => handleServiceClick(serviceCardState), isFavorite: dataAPIsStore.isFavorite(serviceCardState.service.pattern), onToggleFavorite: () => dataAPIsStore.toggleFavorite(serviceCardState.service.pattern) }) }, serviceCardState.guid))), dataAPIsStore.isLoading && (_jsx(Grid, { size: 1, children: _jsx(CubesLoadingIndicator, { isLoading: true, className: "marketplace-lakehouse-search-results__loading-data-products-indicator", children: _jsx(CubesLoadingIndicatorIcon, {}) }) }))] }));
default:
return null;
}
};
return (_jsxs(LegendMarketplacePage, { className: "marketplace-data-apis", children: [_jsx("div", { ref: pageRef }), _jsx(Container, { className: "marketplace-data-apis__search-container", children: _jsx(LegendMarketplaceSearchBar, { stateSearchQuery: dataAPIsStore.searchQuery, onSearch: (query) => handleSearch(query), placeholder: "Search Legend Services...", className: "marketplace-data-apis__search-bar", enableAutosuggest: false }) }), _jsx("div", { className: "legend-marketplace-search-results__sort-bar", children: _jsxs("div", { className: "legend-marketplace-search-results__sort-bar__container", children: [_jsxs(Typography, { variant: "h4", className: "marketplace-lakehouse-search-results__subtitles", children: [dataAPIsStore.totalFilteredCount, " Services"] }), _jsxs("div", { className: "legend-marketplace-search-results__sort-bar__controls", children: [_jsx(FormControlLabel, { className: "legend-marketplace-search-results__own-services-toggle", control: _jsx(Switch, { checked: dataAPIsStore.showOwnServicesOnly, onChange: (e) => {
dataAPIsStore.setShowOwnServicesOnly(e.target.checked);
}, size: "small" }), label: "My Services" }), _jsx("span", { className: "legend-marketplace-search-results__sort-bar__controls-divider" }), _jsx(IconButton, { className: clsx('legend-marketplace-search-results__favorites-toggle', dataAPIsStore.showFavoritesOnly &&
'legend-marketplace-search-results__favorites-toggle--active'), onClick: () => dataAPIsStore.setShowFavoritesOnly(!dataAPIsStore.showFavoritesOnly), title: dataAPIsStore.showFavoritesOnly
? 'Show all services'
: 'Show favorites only', size: "small", children: _jsx(StarIcon, {}) }), _jsx("span", { className: "legend-marketplace-search-results__sort-bar__controls-divider" }), _jsxs("div", { className: "legend-marketplace-search-results__view-toggle legend-marketplace-search-results__view-toggle--three", children: [_jsx("div", { className: clsx('legend-marketplace-search-results__view-toggle__slider', viewMode === ServicesViewMode.LIST &&
'legend-marketplace-search-results__view-toggle__slider--middle', viewMode === ServicesViewMode.GRID &&
'legend-marketplace-search-results__view-toggle__slider--right') }), _jsx(IconButton, { className: clsx('legend-marketplace-search-results__view-toggle__btn', viewMode === ServicesViewMode.TILE &&
'legend-marketplace-search-results__view-toggle__btn--active'), onClick: () => {
dataAPIsStore.setViewMode(ServicesViewMode.TILE);
LegendMarketplaceTelemetryHelper.logEvent_ToggleServicesViewMode(applicationStore.telemetryService, ServicesViewMode.TILE);
}, title: "Tile View", size: "small", children: _jsx(WindowIcon, {}) }), _jsx(IconButton, { className: clsx('legend-marketplace-search-results__view-toggle__btn', viewMode === ServicesViewMode.LIST &&
'legend-marketplace-search-results__view-toggle__btn--active'), onClick: () => {
dataAPIsStore.setViewMode(ServicesViewMode.LIST);
LegendMarketplaceTelemetryHelper.logEvent_ToggleServicesViewMode(applicationStore.telemetryService, ServicesViewMode.LIST);
}, title: "List View", size: "small", children: _jsx(ViewHeadlineIcon, {}) }), _jsx(IconButton, { className: clsx('legend-marketplace-search-results__view-toggle__btn', viewMode === ServicesViewMode.GRID &&
'legend-marketplace-search-results__view-toggle__btn--active'), onClick: () => {
dataAPIsStore.setViewMode(ServicesViewMode.GRID);
LegendMarketplaceTelemetryHelper.logEvent_ToggleServicesViewMode(applicationStore.telemetryService, ServicesViewMode.GRID);
}, title: "Grid View", size: "small", children: _jsx(TableIcon, {}) })] }), _jsx("span", { className: "legend-marketplace-search-results__sort-bar__controls-divider" }), _jsx(FormControl, { children: _jsxs(Select, { autoWidth: true, displayEmpty: true, value: dataAPIsStore.sort, renderValue: () => 'Sort', onChange: (e) => {
const sortValue = e.target.value;
dataAPIsStore.setSort(sortValue);
LegendMarketplaceTelemetryHelper.logEvent_SortServices(applicationStore.telemetryService, sortValue);
}, className: "legend-marketplace-search-results__sort-select", children: [_jsx(MenuItem, { disabled: true, value: "Sort", children: "Sort" }), Object.values(LegendServiceSort).map((sortValue) => (_jsxs(MenuItem, { value: sortValue, className: "legend-marketplace-search-results__sort-menu-item", children: [sortValue, dataAPIsStore.sort === sortValue && _jsx(CheckIcon, {})] }, sortValue)))] }) })] })] }) }), _jsx(Container, { maxWidth: "xxxl", className: "marketplace-lakehouse-search-results__results-container", children: _jsxs("div", { className: "marketplace-lakehouse-search-results__results-layout", children: [_jsx("div", { className: "marketplace-lakehouse-search-results__sidebar", children: _jsx(DataAPIsFiltersPanel, { store: dataAPIsStore }) }), _jsx("div", { className: "marketplace-lakehouse-search-results__main-content", children: dataAPIsStore.serviceCardStates.length > 0 &&
dataAPIsStore.totalFilteredCount === 0 ? (_jsxs("div", { className: "marketplace-lakehouse-search-results__empty-state", children: [_jsx(Typography, { variant: "h5", className: "marketplace-lakehouse-search-results__empty-state__title", children: "No results found" }), _jsx(Typography, { variant: "body1", className: "marketplace-lakehouse-search-results__empty-state__message", children: "We couldn't find any Services matching your search. Try adjusting your search terms or clearing filters." })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "marketplace-data-apis__view-content", children: renderServiceView() }, viewMode), viewMode !== ServicesViewMode.GRID && (_jsx(PaginationControls, { totalItems: dataAPIsStore.totalFilteredCount, itemsPerPage: dataAPIsStore.itemsPerPage, page: dataAPIsStore.page, onPageChange: handlePageChange, onItemsPerPageChange: handleItemsPerPageChange, disabled: dataAPIsStore.isLoading, pageSizeOptions: [12, 25, 50, 100] }))] })) })] }) })] }));
}));
//# sourceMappingURL=LegendMarketplaceDataAPIs.js.map