@finos/legend-application-marketplace/lib/pages/Lakehouse/searchResults/LegendMarketplaceSearchResults.js

Legend Marketplace application core

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 { flowResult } from 'mobx';
import { useLegendMarketplaceSearchResultsStore, withLegendMarketplaceSearchResultsStore, } from '../../../application/providers/LegendMarketplaceSearchResultsStoreProvider.js';
import { useCallback, useEffect, useRef } from 'react';
import { CheckIcon, clsx, CubesLoadingIndicator, CubesLoadingIndicatorIcon, ViewHeadlineIcon, WindowIcon, InfoCircleIcon, } from '@finos/legend-art';
import { Container, FormControl, Grid, IconButton, MenuItem, Select, Tooltip, Typography, } from '@mui/material';
import { DataProductSort, SearchResultViewOption, SearchResultsViewMode, } from '../../../stores/lakehouse/LegendMarketplaceSearchResultsStore.js';
import { generateFieldSearchResultsRoute, LEGEND_MARKETPLACE_LAKEHOUSE_SEARCH_RESULTS_QUERY_PARAM_TOKEN, } from '../../../__lib__/LegendMarketplaceNavigation.js';
import { LegendMarketplaceSearchBar } from '../../../components/SearchBar/LegendMarketplaceSearchBar.js';
import { LegendMarketplacePage } from '../../LegendMarketplacePage.js';
import { useAuth } from 'react-oidc-context';
import { LakehouseProductCard } from '../../../components/LakehouseProductCard/LakehouseProductCard.js';
import { LakehouseProductListItem } from '../../../components/LakehouseProductCard/LakehouseProductListItem.js';
import { LEGEND_MARKETPLACE_PAGE, LegendMarketplaceTelemetryHelper, } from '../../../__lib__/LegendMarketplaceTelemetryHelper.js';
import { generatePathForDataProductSearchResult } from '../../../utils/SearchUtils.js';
import { logClickingDataProductCard } from '../../../utils/LogUtils.js';
import { useSyncStateAndSearchParam } from '@finos/legend-application';
import { useSearchParams } from '@finos/legend-application/browser';
import { isNonEmptyString } from '@finos/legend-shared';
import { PaginationControls } from '../../../components/Pagination/PaginationControls.js';
import { MarketplaceSearchFiltersPanel } from '../../../components/MarketplaceSearchFiltersPanel/MarketplaceSearchFiltersPanel.js';
import { LegendMarketplaceOptionSelector } from '../../../components/OptionSelector/LegendMarketplaceOptionSelector.js';
const SearchResultsContent = observer((props) => {
    const { searchResultsStore, isLoadingDataProducts, handleProductCardClick, handlePageChange, handleItemsPerPageChange, handleShowAllProducts, } = props;
    if (isLoadingDataProducts) {
        return (_jsx("div", { className: "marketplace-lakehouse-search-results__loading-container", children: _jsx(CubesLoadingIndicator, { isLoading: true, className: "marketplace-lakehouse-search-results__loading-data-products-indicator", children: _jsx(CubesLoadingIndicatorIcon, {}) }) }));
    }
    if (searchResultsStore.totalItems === 0) {
        return (_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 data products matching your search. Try adjusting your search terms or clearing filters." })] }));
    }
    return (_jsxs(_Fragment, { children: [searchResultsStore.viewMode === SearchResultsViewMode.TILE && (_jsx(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: searchResultsStore.filterSortProducts?.map((productCardState) => (_jsx(Grid, { size: 1, children: _jsx(LakehouseProductCard, { productCardState: productCardState, moreInfoPreview: "small", onClick: () => handleProductCardClick(productCardState) }) }, productCardState.guid))) })), searchResultsStore.viewMode === SearchResultsViewMode.LIST && (_jsx("div", { className: "marketplace-lakehouse-search-results__list-view", children: searchResultsStore.filterSortProducts?.map((productCardState) => (_jsx(LakehouseProductListItem, { productCardState: productCardState, onClick: handleProductCardClick }, productCardState.guid))) })), searchResultsStore.isOnLastPage &&
                !searchResultsStore.showAllProducts &&
                !searchResultsStore.useProducerSearch &&
                searchResultsStore.hasFilteredDataProducts && (_jsxs("div", { className: "marketplace-lakehouse-search-results__show-all-container", children: [_jsxs("div", { className: "marketplace-lakehouse-search-results__show-all-text-row", children: [_jsx(Typography, { variant: "body1", className: "marketplace-lakehouse-search-results__show-all-text", children: "Can't find what you're looking for?" }), _jsx(Tooltip, { title: "Data products might be automatically filtered out if they are identified as duplicates (e.g. QA, UAT, DEV)", placement: "top", arrow: true, children: _jsx("span", { className: "marketplace-lakehouse-search-results__show-all-info-icon", children: _jsx(InfoCircleIcon, {}) }) })] }), _jsx("button", { className: "marketplace-lakehouse-search-results__show-all-btn", onClick: handleShowAllProducts, children: "Show all data products" })] })), _jsx(PaginationControls, { totalItems: searchResultsStore.totalItems, itemsPerPage: searchResultsStore.itemsPerPage, page: searchResultsStore.page, onPageChange: handlePageChange, onItemsPerPageChange: handleItemsPerPageChange, disabled: isLoadingDataProducts })] }));
});
export const LegendMarketplaceSearchResults = withLegendMarketplaceSearchResultsStore(observer(() => {
    const searchResultsStore = useLegendMarketplaceSearchResultsStore();
    const auth = useAuth();
    const [searchParams, setSearchParams] = useSearchParams();
    const marketplaceBaseStore = searchResultsStore.marketplaceBaseStore;
    const applicationStore = marketplaceBaseStore.applicationStore;
    const tokenRef = useRef(auth.user?.access_token);
    useEffect(() => {
        tokenRef.current = auth.user?.access_token;
    }, [auth.user?.access_token]);
    useEffect(() => {
        if (searchResultsStore.useProducerSearch === undefined) {
            return;
        }
        searchResultsStore.clearAllFilters();
        searchResultsStore.setPage(1);
        searchResultsStore.setShowAllProducts(false);
        flowResult(searchResultsStore.executeSearch(searchResultsStore.searchQuery ?? '', searchResultsStore.useProducerSearch, tokenRef.current)).catch(applicationStore.alertUnhandledError);
    }, [
        applicationStore.telemetryService,
        tokenRef,
        searchResultsStore,
        searchResultsStore.searchQuery,
        searchResultsStore.useProducerSearch,
        applicationStore,
    ]);
    useSyncStateAndSearchParam(searchResultsStore.useProducerSearch, useCallback((val) => {
        searchResultsStore.setUseProducerSearch(val === 'true');
    }, [searchResultsStore]), LEGEND_MARKETPLACE_LAKEHOUSE_SEARCH_RESULTS_QUERY_PARAM_TOKEN.USE_PRODUCER_SEARCH, searchParams.get(LEGEND_MARKETPLACE_LAKEHOUSE_SEARCH_RESULTS_QUERY_PARAM_TOKEN.USE_PRODUCER_SEARCH), setSearchParams, useCallback(() => true, []));
    useSyncStateAndSearchParam(searchResultsStore.searchQuery, useCallback((val) => {
        if (val !== null) {
            searchResultsStore.setSearchQuery(val);
        }
    }, [searchResultsStore]), LEGEND_MARKETPLACE_LAKEHOUSE_SEARCH_RESULTS_QUERY_PARAM_TOKEN.QUERY, searchParams.get(LEGEND_MARKETPLACE_LAKEHOUSE_SEARCH_RESULTS_QUERY_PARAM_TOKEN.QUERY), setSearchParams, useCallback(() => true, []));
    const isLoadingDataProducts = searchResultsStore.isLoading;
    const handleSearch = (_query, _useProducerSearch, _useFieldSearch) => {
        if (isNonEmptyString(_query)) {
            if (_useFieldSearch) {
                applicationStore.navigationService.navigator.goToLocation(generateFieldSearchResultsRoute(_query));
                LegendMarketplaceTelemetryHelper.logEvent_SearchQuery(applicationStore.telemetryService, _query, false, LEGEND_MARKETPLACE_PAGE.SEARCH_RESULTS_PAGE, true);
                return;
            }
            searchResultsStore.setSearchQuery(_query);
            searchResultsStore.setUseProducerSearch(_useProducerSearch);
            LegendMarketplaceTelemetryHelper.logEvent_SearchQuery(applicationStore.telemetryService, searchResultsStore.searchQuery, searchResultsStore.useProducerSearch ?? false, LEGEND_MARKETPLACE_PAGE.SEARCH_RESULTS_PAGE);
        }
    };
    const handlePageChange = useCallback((page) => {
        searchResultsStore.setPage(page);
        flowResult(searchResultsStore.executeSearch(searchResultsStore.searchQuery ?? '', searchResultsStore.useProducerSearch ?? false, tokenRef.current)).catch(applicationStore.alertUnhandledError);
    }, [searchResultsStore, applicationStore]);
    const handleItemsPerPageChange = useCallback((itemsPerPage) => {
        searchResultsStore.setItemsPerPage(itemsPerPage);
        flowResult(searchResultsStore.executeSearch(searchResultsStore.searchQuery ?? '', searchResultsStore.useProducerSearch ?? false, tokenRef.current)).catch(applicationStore.alertUnhandledError);
    }, [searchResultsStore, applicationStore]);
    const handleProductCardClick = useCallback((productCardState) => {
        const path = generatePathForDataProductSearchResult(productCardState.searchResult);
        if (path) {
            applicationStore.navigationService.navigator.visitAddress(applicationStore.navigationService.navigator.generateAddress(path));
        }
        logClickingDataProductCard(productCardState, applicationStore, LEGEND_MARKETPLACE_PAGE.SEARCH_RESULTS_PAGE);
    }, [applicationStore]);
    const handleShowAllProducts = useCallback(() => {
        LegendMarketplaceTelemetryHelper.logEvent_ShowAllDataProducts(applicationStore.telemetryService, searchResultsStore.searchQuery);
        searchResultsStore.setShowAllProducts(true);
        flowResult(searchResultsStore.executeSearch(searchResultsStore.searchQuery ?? '', searchResultsStore.useProducerSearch ?? false, tokenRef.current)).catch(applicationStore.alertUnhandledError);
    }, [searchResultsStore, applicationStore]);
    return (_jsxs(LegendMarketplacePage, { className: "marketplace-lakehouse-search-results", children: [_jsx(Container, { className: "marketplace-lakehouse-search-results__search-container", children: _jsx(LegendMarketplaceSearchBar, { showSettings: true, onSearch: handleSearch, stateSearchQuery: searchResultsStore.searchQuery, stateUseProducerSearch: searchResultsStore.useProducerSearch, stateUseFieldSearch: false, placeholder: "Search Legend Marketplace", className: "marketplace-lakehouse-search-results__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: [_jsx(Typography, { variant: "h4", className: "marketplace-lakehouse-search-results__subtitles", children: searchResultsStore.useProducerSearch
                                ? `${searchResultsStore.filterSortProducts?.length ?? 0} Products`
                                : `${searchResultsStore.totalItems} Products` }), isNonEmptyString(searchResultsStore.searchQuery) && (_jsx("div", { className: "legend-marketplace-search-results__search-type-tabs", children: _jsx(LegendMarketplaceOptionSelector, { options: [
                                    SearchResultViewOption.DATA_PRODUCTS,
                                    SearchResultViewOption.DATA_FIELDS,
                                ], selectedOption: SearchResultViewOption.DATA_PRODUCTS, onChange: (option) => {
                                    if (option === SearchResultViewOption.DATA_FIELDS) {
                                        applicationStore.navigationService.navigator.goToLocation(generateFieldSearchResultsRoute(searchResultsStore.searchQuery));
                                    }
                                }, ariaLabel: "Search result type" }) })), _jsxs("div", { className: "legend-marketplace-search-results__sort-bar__controls", children: [_jsxs("div", { className: "legend-marketplace-search-results__view-toggle", children: [_jsx("div", { className: clsx('legend-marketplace-search-results__view-toggle__slider', searchResultsStore.viewMode ===
                                                SearchResultsViewMode.LIST &&
                                                'legend-marketplace-search-results__view-toggle__slider--right') }), _jsx(IconButton, { className: clsx('legend-marketplace-search-results__view-toggle__btn', searchResultsStore.viewMode ===
                                                SearchResultsViewMode.TILE &&
                                                'legend-marketplace-search-results__view-toggle__btn--active'), onClick: () => {
                                                searchResultsStore.setViewMode(SearchResultsViewMode.TILE);
                                                LegendMarketplaceTelemetryHelper.logEvent_ToggleViewMode(applicationStore.telemetryService, SearchResultsViewMode.TILE);
                                            }, title: "Tile View", size: "small", children: _jsx(WindowIcon, {}) }), _jsx(IconButton, { className: clsx('legend-marketplace-search-results__view-toggle__btn', searchResultsStore.viewMode ===
                                                SearchResultsViewMode.LIST &&
                                                'legend-marketplace-search-results__view-toggle__btn--active'), onClick: () => {
                                                searchResultsStore.setViewMode(SearchResultsViewMode.LIST);
                                                LegendMarketplaceTelemetryHelper.logEvent_ToggleViewMode(applicationStore.telemetryService, SearchResultsViewMode.LIST);
                                            }, title: "List View", size: "small", children: _jsx(ViewHeadlineIcon, {}) })] }), _jsx("span", { className: "legend-marketplace-search-results__sort-bar__controls-divider" }), _jsx(FormControl, { children: _jsxs(Select, { autoWidth: true, displayEmpty: true, value: 'Sort', onChange: (e) => {
                                            searchResultsStore.setSort(e.target.value);
                                        }, className: "legend-marketplace-search-results__sort-select", children: [_jsx(MenuItem, { disabled: true, value: "Sort", children: "Sort" }), Object.values(DataProductSort).map((sortValue) => (_jsxs(MenuItem, { value: sortValue, sx: {
                                                    gap: '0.5rem',
                                                }, children: [sortValue, searchResultsStore.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: [!searchResultsStore.useProducerSearch && (_jsx("div", { className: "marketplace-lakehouse-search-results__sidebar", children: _jsx(MarketplaceSearchFiltersPanel, { store: searchResultsStore }) })), _jsx("div", { className: "marketplace-lakehouse-search-results__main-content", children: _jsx(SearchResultsContent, { searchResultsStore: searchResultsStore, isLoadingDataProducts: isLoadingDataProducts, handleProductCardClick: handleProductCardClick, handlePageChange: handlePageChange, handleItemsPerPageChange: handleItemsPerPageChange, handleShowAllProducts: handleShowAllProducts }) })] }) })] }));
}));
//# sourceMappingURL=LegendMarketplaceSearchResults.js.map