@finos/legend-application-marketplace
Version:
Legend Marketplace application core
76 lines • 8.57 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 { useState } from 'react';
import { Chip, Tooltip, Typography } from '@mui/material';
import { DatasetIcon, PackageIcon } from '@finos/legend-art';
import { LegendMarketplaceListItem } from '../MarketplaceCard/LegendMarketplaceListItem.js';
var FieldSearchResultListItemLabel;
(function (FieldSearchResultListItemLabel) {
FieldSearchResultListItemLabel["SHOW_LESS"] = "Show Less";
FieldSearchResultListItemLabel["SHOW_LESS_INLINE"] = "Show less";
FieldSearchResultListItemLabel["SHOW_MORE_INLINE"] = "Show more";
FieldSearchResultListItemLabel["MORE_SUFFIX"] = "More";
FieldSearchResultListItemLabel["DATASET_SEPARATOR"] = "|";
FieldSearchResultListItemLabel["EMPTY_VALUE"] = "-";
})(FieldSearchResultListItemLabel || (FieldSearchResultListItemLabel = {}));
var FieldSearchResultListItemValue;
(function (FieldSearchResultListItemValue) {
FieldSearchResultListItemValue[FieldSearchResultListItemValue["COLLAPSED_VISIBLE_DATA_PRODUCTS"] = 2] = "COLLAPSED_VISIBLE_DATA_PRODUCTS";
FieldSearchResultListItemValue[FieldSearchResultListItemValue["MAX_DESCRIPTION_LENGTH"] = 150] = "MAX_DESCRIPTION_LENGTH";
})(FieldSearchResultListItemValue || (FieldSearchResultListItemValue = {}));
function getCollapsibleListState(items, expanded) {
const visibleItems = expanded
? items
: items.slice(0, FieldSearchResultListItemValue.COLLAPSED_VISIBLE_DATA_PRODUCTS);
const hiddenItemCount = Math.max(0, items.length -
FieldSearchResultListItemValue.COLLAPSED_VISIBLE_DATA_PRODUCTS);
const toggleLabel = expanded
? FieldSearchResultListItemLabel.SHOW_LESS
: `+${hiddenItemCount} ${FieldSearchResultListItemLabel.MORE_SUFFIX}`;
return {
visibleItems,
toggleLabel,
shouldShowToggle: items.length >
FieldSearchResultListItemValue.COLLAPSED_VISIBLE_DATA_PRODUCTS,
};
}
export const FieldSearchResultListRow = observer((props) => {
const { fieldSearchResultState, expanded, onToggleExpanded, onOpenDataProduct, onOpenDatasetInQuery, } = props;
const [descriptionExpanded, setDescriptionExpanded] = useState(false);
const [dpExpanded, setDpExpanded] = useState(false);
const description = fieldSearchResultState.fieldDescription;
const isDescriptionTruncatable = description.length >
FieldSearchResultListItemValue.MAX_DESCRIPTION_LENGTH;
const displayDescription = !descriptionExpanded && isDescriptionTruncatable
? `${description.substring(0, FieldSearchResultListItemValue.MAX_DESCRIPTION_LENGTH)}...`
: description;
const distinctDataProducts = fieldSearchResultState.distinctDataProducts;
const { visibleItems: visibleDataProducts, toggleLabel, shouldShowToggle: shouldShowDataProductToggle, } = getCollapsibleListState(fieldSearchResultState.dataProducts, expanded);
const { visibleItems: visibleDistinctDataProducts, toggleLabel: dpToggleLabel, shouldShowToggle: shouldShowDistinctDataProductToggle, } = getCollapsibleListState(distinctDataProducts, dpExpanded);
const content = (_jsxs("div", { className: "marketplace-lakehouse-field-search-results__list-item-grid", children: [_jsx("div", { className: "marketplace-lakehouse-field-search-results__field-name-cell", children: _jsx(Typography, { className: "marketplace-lakehouse-field-search-results__list-item-text marketplace-lakehouse-field-search-results__list-item-text--primary", children: fieldSearchResultState.fieldName }) }), _jsx("div", { className: "marketplace-lakehouse-field-search-results__type-cell", children: _jsx(Typography, { className: "marketplace-lakehouse-field-search-results__list-item-text", children: fieldSearchResultState.fieldType }) }), _jsxs("div", { className: "marketplace-lakehouse-field-search-results__description-cell", children: [_jsx(Typography, { className: "marketplace-lakehouse-field-search-results__list-item-text", children: displayDescription }), isDescriptionTruncatable && (_jsx("button", { className: "marketplace-lakehouse-field-search-results__description-toggle", onClick: (e) => {
e.stopPropagation();
setDescriptionExpanded(!descriptionExpanded);
}, children: descriptionExpanded
? FieldSearchResultListItemLabel.SHOW_LESS_INLINE
: FieldSearchResultListItemLabel.SHOW_MORE_INLINE }))] }), _jsx("div", { className: "marketplace-lakehouse-field-search-results__data-products-cell", children: distinctDataProducts.length > 0 ? (_jsxs(_Fragment, { children: [visibleDistinctDataProducts.map((dataProduct) => (_jsx(Chip, { clickable: true, label: _jsxs("span", { className: "marketplace-lakehouse-field-search-results__chip-label", children: [_jsx(PackageIcon, { className: "marketplace-lakehouse-field-search-results__chip-icon" }), _jsx("span", { children: dataProduct.name })] }), onClick: () => onOpenDataProduct(dataProduct), className: "marketplace-lakehouse-field-search-results__data-product-link", size: "small" }, `${fieldSearchResultState.id}-dp-${dataProduct.distinctKey}`))), shouldShowDistinctDataProductToggle && (_jsx(Chip, { label: dpToggleLabel, onClick: (e) => {
e.stopPropagation();
setDpExpanded(!dpExpanded);
}, size: "small", variant: "outlined", className: "marketplace-lakehouse-field-search-results__data-product-toggle" }, `${fieldSearchResultState.id}-dp-toggle`))] })) : (_jsx(Typography, { className: "marketplace-lakehouse-field-search-results__list-item-text marketplace-lakehouse-field-search-results__list-item-text--empty", children: FieldSearchResultListItemLabel.EMPTY_VALUE })) }), _jsx("div", { className: "marketplace-lakehouse-field-search-results__data-products-cell", children: fieldSearchResultState.dataProducts.length > 0 ? (_jsxs(_Fragment, { children: [visibleDataProducts.map((dataProduct) => (_jsx(Tooltip, { title: dataProduct.datasetDescription ?? '', placement: "top", arrow: true, disableHoverListener: !dataProduct.datasetDescription, children: _jsx(Chip, { clickable: true, label: _jsxs("span", { className: "marketplace-lakehouse-field-search-results__chip-label", children: [_jsx(PackageIcon, { className: "marketplace-lakehouse-field-search-results__chip-icon" }), _jsx("span", { children: dataProduct.name }), dataProduct.datasetName && (_jsxs("span", { className: "marketplace-lakehouse-field-search-results__chip-secondary", children: [_jsx("span", { className: "marketplace-lakehouse-field-search-results__chip-separator", children: FieldSearchResultListItemLabel.DATASET_SEPARATOR }), _jsx(DatasetIcon, { className: "marketplace-lakehouse-field-search-results__chip-icon" }), _jsx("span", { className: "marketplace-lakehouse-field-search-results__chip-secondary-text", children: dataProduct.datasetName })] }))] }), onClick: () => onOpenDatasetInQuery(dataProduct), className: "marketplace-lakehouse-field-search-results__data-product-link", size: "small" }) }, `${fieldSearchResultState.id}-${dataProduct.path}-${dataProduct.datasetName ?? ''}`))), shouldShowDataProductToggle && (_jsx(Chip, { label: toggleLabel, onClick: () => onToggleExpanded(fieldSearchResultState.id), size: "small", variant: "outlined", className: "marketplace-lakehouse-field-search-results__data-product-toggle" }, `${fieldSearchResultState.id}-toggle`))] })) : (_jsx(Typography, { className: "marketplace-lakehouse-field-search-results__list-item-text marketplace-lakehouse-field-search-results__list-item-text--empty", children: FieldSearchResultListItemLabel.EMPTY_VALUE })) })] }));
return (_jsx(LegendMarketplaceListItem, { className: "marketplace-lakehouse-field-search-results__list-item", content: content }));
});
//# sourceMappingURL=FieldSearchResultListItem.js.map