@finos/legend-application-marketplace 0.2.3 → 0.2.4

package/src/components/MarketplaceCard/FieldSearchResultListItem.tsx

@@ -0,0 +1,163 @@
+/**
+ * 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, Typography } from '@mui/material';
+import { DatasetIcon, PackageIcon } from '@finos/legend-art';
+import type {
+  FieldSearchDataProductEntry,
+  FieldSearchResultState,
+} from '../../stores/lakehouse/fieldSearch/FieldSearchResultState.js';
+import { LegendMarketplaceListItem } from '../MarketplaceCard/LegendMarketplaceListItem.js';
+
+enum FieldSearchResultListItemLabel {
+  SHOW_LESS = 'Show Less',
+  MORE_SUFFIX = 'More',
+  DATASET_SEPARATOR = '|',
+  EMPTY_VALUE = '-',
+}
+
+enum FieldSearchResultListItemValue {
+  COLLAPSED_VISIBLE_DATA_PRODUCTS = 2,
+  MAX_DESCRIPTION_LENGTH = 150,
+}
+
+export const FieldSearchResultListRow = observer(
+  (props: {
+    fieldSearchResultState: FieldSearchResultState;
+    expanded: boolean;
+    onToggleExpanded: (rowId: string) => void;
+    onOpenDataProduct: (dataProduct: FieldSearchDataProductEntry) => void;
+  }): React.ReactNode => {
+    const {
+      fieldSearchResultState,
+      expanded,
+      onToggleExpanded,
+      onOpenDataProduct,
+    } = props;
+
+    const [descriptionExpanded, setDescriptionExpanded] = 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 visibleDataProducts = expanded
+      ? fieldSearchResultState.dataProducts
+      : fieldSearchResultState.dataProducts.slice(
+          0,
+          FieldSearchResultListItemValue.COLLAPSED_VISIBLE_DATA_PRODUCTS,
+        );
+    const hiddenDataProductCount = Math.max(
+      0,
+      fieldSearchResultState.dataProducts.length -
+        FieldSearchResultListItemValue.COLLAPSED_VISIBLE_DATA_PRODUCTS,
+    );
+    const toggleLabel = expanded
+      ? FieldSearchResultListItemLabel.SHOW_LESS
+      : `+${hiddenDataProductCount} ${FieldSearchResultListItemLabel.MORE_SUFFIX}`;
+
+    const content = (
+      <div className="marketplace-lakehouse-field-search-results__list-item-grid">
+        <div className="marketplace-lakehouse-field-search-results__field-name-cell">
+          <Typography className="marketplace-lakehouse-field-search-results__list-item-text marketplace-lakehouse-field-search-results__list-item-text--primary">
+            {fieldSearchResultState.fieldName}
+          </Typography>
+        </div>
+        <div className="marketplace-lakehouse-field-search-results__type-cell">
+          <Typography className="marketplace-lakehouse-field-search-results__list-item-text">
+            {fieldSearchResultState.fieldType}
+          </Typography>
+        </div>
+        <div className="marketplace-lakehouse-field-search-results__description-cell">
+          <Typography className="marketplace-lakehouse-field-search-results__list-item-text">
+            {displayDescription}
+          </Typography>
+          {isDescriptionTruncatable && (
+            <button
+              className="marketplace-lakehouse-field-search-results__description-toggle"
+              onClick={(e) => {
+                e.stopPropagation();
+                setDescriptionExpanded(!descriptionExpanded);
+              }}
+            >
+              {descriptionExpanded ? 'Show less' : 'Show more'}
+            </button>
+          )}
+        </div>
+        <div className="marketplace-lakehouse-field-search-results__data-products-cell">
+          {fieldSearchResultState.dataProducts.length > 0 ? (
+            <>
+              {visibleDataProducts.map((dataProduct) => (
+                <Chip
+                  key={`${fieldSearchResultState.id}-${dataProduct.path}-${dataProduct.datasetName ?? ''}`}
+                  clickable={true}
+                  label={
+                    <span className="marketplace-lakehouse-field-search-results__chip-label">
+                      <PackageIcon className="marketplace-lakehouse-field-search-results__chip-icon" />
+                      <span>{dataProduct.name}</span>
+                      {dataProduct.datasetName && (
+                        <span className="marketplace-lakehouse-field-search-results__chip-secondary">
+                          <span className="marketplace-lakehouse-field-search-results__chip-separator">
+                            {FieldSearchResultListItemLabel.DATASET_SEPARATOR}
+                          </span>
+                          <DatasetIcon className="marketplace-lakehouse-field-search-results__chip-icon" />
+                          <span className="marketplace-lakehouse-field-search-results__chip-secondary-text">
+                            {dataProduct.datasetName}
+                          </span>
+                        </span>
+                      )}
+                    </span>
+                  }
+                  onClick={() => onOpenDataProduct(dataProduct)}
+                  className="marketplace-lakehouse-field-search-results__data-product-link"
+                  size="small"
+                />
+              ))}
+              {fieldSearchResultState.dataProducts.length >
+                FieldSearchResultListItemValue.COLLAPSED_VISIBLE_DATA_PRODUCTS && (
+                <Chip
+                  key={`${fieldSearchResultState.id}-toggle`}
+                  label={toggleLabel}
+                  onClick={() => onToggleExpanded(fieldSearchResultState.id)}
+                  size="small"
+                  variant="outlined"
+                  className="marketplace-lakehouse-field-search-results__data-product-toggle"
+                />
+              )}
+            </>
+          ) : (
+            <Typography className="marketplace-lakehouse-field-search-results__list-item-text marketplace-lakehouse-field-search-results__list-item-text--empty">
+              {FieldSearchResultListItemLabel.EMPTY_VALUE}
+            </Typography>
+          )}
+        </div>
+      </div>
+    );
+
+    return (
+      <LegendMarketplaceListItem
+        className="marketplace-lakehouse-field-search-results__list-item"
+        content={content}
+      />
+    );
+  },
+);

package/src/components/MarketplaceSearchFiltersPanel/MarketplaceSearchFiltersPanel.tsx

@@ -181,7 +181,7 @@ const TaxonomyTreeNode: React.FC<{
   );
 });
 
-const FilterSection: React.FC<{
+export const FilterSection: React.FC<{
   title: string;
   children: React.ReactNode;
 }> = ({ title, children }) => (
@@ -195,7 +195,7 @@ const FilterSection: React.FC<{
   </div>
 );
 
-const FilterCheckboxOption: React.FC<{
+export const FilterCheckboxOption: React.FC<{
   label: string;
   checked: boolean;
   onChange: () => void;

package/src/components/ProviderCard/LegendMarketplaceTerminalCard.tsx

@@ -48,6 +48,9 @@ export const LegendMarketplaceTerminalCard = observer(
     );
 
     const [modalMessage, setModalMessage] = useState<string>('');
+    const [modalTotalCount, setModalTotalCount] = useState<
+      number | null | undefined
+    >(undefined);
 
     const legendMarketplaceBaseStore = useLegendMarketplaceBaseStore();
     const applicationStore = legendMarketplaceBaseStore.applicationStore;
@@ -72,6 +75,7 @@ export const LegendMarketplaceTerminalCard = observer(
         if (result.recommendations && result.recommendations.length > 0) {
           setRecommendedItems(result.recommendations);
           setModalMessage(result.message);
+          setModalTotalCount(result.totalCount);
           setShowRecommendationsModal(true);
         }
       } catch (error) {
@@ -97,9 +101,11 @@ export const LegendMarketplaceTerminalCard = observer(
         _selectedTerminal: TerminalResult,
         recommendations: TerminalResult[],
         responseMessage: string,
+        totalCount?: number | null,
       ) => {
         setRecommendedItems(recommendations);
         setModalMessage(responseMessage);
+        setModalTotalCount(totalCount);
         setShowRecommendationsModal(true);
       },
       [],
@@ -203,6 +209,7 @@ export const LegendMarketplaceTerminalCard = observer(
           setShowModal={setShowRecommendationsModal}
           onViewCart={handleViewCart}
           onTerminalSelected={handleTerminalSelected}
+          totalCount={modalTotalCount}
         />
       </Card>
     );

package/src/components/SearchBar/LegendMarketplaceSearchBar.tsx

@@ -63,13 +63,18 @@ export interface Vendor {
 
 export const LegendMarketplaceSearchBar = observer(
   (props: {
-    onSearch?: (query: string | undefined, useProducerSearch: boolean) => void;
+    onSearch?: (
+      query: string | undefined,
+      useProducerSearch: boolean,
+      useFieldSearch: boolean,
+    ) => void;
     stateSearchQuery?: string | undefined;
     placeholder?: string;
     onChange?: (query: string) => void;
     className?: string | undefined;
     showSettings?: boolean;
     stateUseProducerSearch?: boolean | undefined;
+    stateUseFieldSearch?: boolean;
     enableAutosuggest?: boolean;
   }): JSX.Element => {
     const {
@@ -80,6 +85,7 @@ export const LegendMarketplaceSearchBar = observer(
       className,
       showSettings,
       stateUseProducerSearch,
+      stateUseFieldSearch,
       enableAutosuggest = true,
     } = props;
 
@@ -92,6 +98,9 @@ export const LegendMarketplaceSearchBar = observer(
     const [useProducerSearch, setUseProducerSearch] = useState(
       stateUseProducerSearch ?? false,
     );
+    const [useFieldSearch, setUseFieldSearch] = useState(
+      stateUseFieldSearch ?? false,
+    );
     const [searchMenuAnchorEl, setSearchMenuAnchorEl] =
       useState<HTMLElement | null>();
     const [suggestions, setSuggestions] = useState<SearchSuggestion[]>([]);
@@ -181,6 +190,10 @@ export const LegendMarketplaceSearchBar = observer(
       setUseProducerSearch(stateUseProducerSearch ?? false);
     }, [stateUseProducerSearch]);
 
+    useEffect(() => {
+      setUseFieldSearch(stateUseFieldSearch ?? false);
+    }, [stateUseFieldSearch]);
+
     useEffect(() => {
       const abortController = new AbortController();
 
@@ -241,7 +254,7 @@ export const LegendMarketplaceSearchBar = observer(
         selectedSuggestion.type === SearchSuggestionType.SEARCH_QUERY ||
         selectedSuggestion.type === SearchSuggestionType.DEFAULT
       ) {
-        onSearch?.(selectedQuery, useProducerSearch);
+        onSearch?.(selectedQuery, useProducerSearch, useFieldSearch);
         LegendMarketplaceTelemetryHelper.logEvent_SearchAutosuggestSelection(
           applicationStore.telemetryService,
           selectedQuery,
@@ -274,7 +287,7 @@ export const LegendMarketplaceSearchBar = observer(
 
     const handleSubmit = (event: React.FormEvent): void => {
       event.preventDefault();
-      onSearch?.(searchQuery, useProducerSearch);
+      onSearch?.(searchQuery, useProducerSearch, useFieldSearch);
     };
 
     const getOptionLabel = (option: SearchSuggestion | string): string =>
@@ -525,6 +538,9 @@ export const LegendMarketplaceSearchBar = observer(
                     checked={useProducerSearch}
                     onChange={(event) => {
                       setUseProducerSearch(event.target.checked);
+                      if (event.target.checked) {
+                        setUseFieldSearch(false);
+                      }
                       LegendMarketplaceTelemetryHelper.logEvent_ToggleProducerSearch(
                         applicationStore.telemetryService,
                         event.target.checked,
@@ -540,6 +556,31 @@ export const LegendMarketplaceSearchBar = observer(
                 }
               />
             </MenuItem>
+            <MenuItem>
+              <FormControlLabel
+                control={
+                  <Switch
+                    checked={useFieldSearch}
+                    onChange={(event) => {
+                      setUseFieldSearch(event.target.checked);
+                      if (event.target.checked) {
+                        setUseProducerSearch(false);
+                      }
+                      LegendMarketplaceTelemetryHelper.logEvent_ToggleFieldSearch(
+                        applicationStore.telemetryService,
+                        event.target.checked,
+                      );
+                    }}
+                  />
+                }
+                label={
+                  <>
+                    Field Search{' '}
+                    <LegendMarketplaceInfoTooltip title="Use this search to discover data products and datasets that contain a specific field" />
+                  </>
+                }
+              />
+            </MenuItem>
           </Menu>
         )}
       </form>

package/src/pages/Lakehouse/MarketplaceLakehouseHome.tsx

@@ -25,7 +25,10 @@ import {
   CubesLoadingIndicator,
   CubesLoadingIndicatorIcon,
 } from '@finos/legend-art';
-import { generateLakehouseSearchResultsRoute } from '../../__lib__/LegendMarketplaceNavigation.js';
+import {
+  generateFieldSearchResultsRoute,
+  generateLakehouseSearchResultsRoute,
+} from '../../__lib__/LegendMarketplaceNavigation.js';
 import {
   assertErrorThrown,
   isNonEmptyString,
@@ -217,16 +220,20 @@ export const MarketplaceLakehouseHome = observer(() => {
   const handleSearch = (
     _query: string | undefined,
     _useProducerSearch: boolean,
+    _useFieldSearch: boolean,
   ): void => {
     if (isNonEmptyString(_query)) {
       applicationStore.navigationService.navigator.goToLocation(
-        generateLakehouseSearchResultsRoute(_query, _useProducerSearch),
+        _useFieldSearch
+          ? generateFieldSearchResultsRoute(_query)
+          : generateLakehouseSearchResultsRoute(_query, _useProducerSearch),
       );
       LegendMarketplaceTelemetryHelper.logEvent_SearchQuery(
         applicationStore.telemetryService,
         _query,
         _useProducerSearch,
         LEGEND_MARKETPLACE_PAGE.HOME_PAGE,
+        _useFieldSearch,
       );
     }
   };