@finos/legend-application-marketplace 0.2.21 → 0.2.23

package/src/pages/Lakehouse/searchResults/LegendMarketplaceFieldSearchResults.tsx

@@ -42,10 +42,14 @@ import {
 } from '../../../application/providers/LegendMarketplaceFieldSearchResultsStoreProvider.js';
 import { FieldSearchFiltersPanel } from '../../../components/FieldSearchFiltersPanel/FieldSearchFiltersPanel.js';
 import { FieldSearchResultListRow } from '../../../components/MarketplaceCard/FieldSearchResultListItem.js';
+import { LegendMarketplaceOptionSelector } from '../../../components/OptionSelector/LegendMarketplaceOptionSelector.js';
 import { LegendMarketplaceSearchBar } from '../../../components/SearchBar/LegendMarketplaceSearchBar.js';
 import { PaginationControls } from '../../../components/Pagination/PaginationControls.js';
 import { LegendMarketplacePage } from '../../LegendMarketplacePage.js';
-import { DataProductTypeFilter } from '../../../stores/lakehouse/LegendMarketplaceSearchResultsStore.js';
+import {
+  DataProductTypeFilter,
+  SearchResultViewOption,
+} from '../../../stores/lakehouse/LegendMarketplaceSearchResultsStore.js';
 import type { LegendMarketplaceFieldSearchResultsStore } from '../../../stores/lakehouse/LegendMarketplaceFieldSearchResultsStore.js';
 import { type FieldSearchDataProductEntry } from '../../../stores/lakehouse/fieldSearch/FieldSearchResultState.js';
 
@@ -371,6 +375,15 @@ const LegendMarketplaceFieldSearchResultsPage = observer(() => {
     );
   }, [applicationStore, fieldSearchResultsStore.searchQuery]);
 
+  const handleSearchResultViewChange = useCallback(
+    (value: SearchResultViewOption) => {
+      if (value === SearchResultViewOption.DATA_PRODUCTS) {
+        handleOpenDataProductsTab();
+      }
+    },
+    [handleOpenDataProductsTab],
+  );
+
   return (
     <LegendMarketplacePage className="marketplace-lakehouse-search-results marketplace-lakehouse-field-search-results">
       <div ref={pageRef} />
@@ -394,30 +407,16 @@ const LegendMarketplaceFieldSearchResultsPage = observer(() => {
           >
             {fieldSearchResultsStore.totalFieldMatches} Fields
           </Typography>
-          <div
-            className="legend-marketplace-search-results__search-type-tabs"
-            role="tablist"
-            aria-label="Search result type"
-          >
-            <button
-              type="button"
-              role="tab"
-              aria-selected={false}
-              tabIndex={-1}
-              className="legend-marketplace-search-results__search-type-tab"
-              onClick={handleOpenDataProductsTab}
-            >
-              Data Products
-            </button>
-            <button
-              type="button"
-              role="tab"
-              aria-selected={true}
-              tabIndex={0}
-              className="legend-marketplace-search-results__search-type-tab legend-marketplace-search-results__search-type-tab--active"
-            >
-              Data Fields
-            </button>
+          <div className="legend-marketplace-search-results__search-type-tabs">
+            <LegendMarketplaceOptionSelector
+              options={[
+                SearchResultViewOption.DATA_PRODUCTS,
+                SearchResultViewOption.DATA_FIELDS,
+              ]}
+              selectedOption={SearchResultViewOption.DATA_FIELDS}
+              onChange={handleSearchResultViewChange}
+              ariaLabel="Search result type"
+            />
           </div>
         </div>
       </div>

package/src/pages/Lakehouse/searchResults/LegendMarketplaceSearchResults.tsx

@@ -42,6 +42,7 @@ import {
 } from '@mui/material';
 import {
   DataProductSort,
+  SearchResultViewOption,
   SearchResultsViewMode,
   type LegendMarketplaceSearchResultsStore,
 } from '../../../stores/lakehouse/LegendMarketplaceSearchResultsStore.js';
@@ -66,6 +67,7 @@ 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: {
@@ -383,36 +385,24 @@ export const LegendMarketplaceSearchResults =
                   : `${searchResultsStore.totalItems} Products`}
               </Typography>
               {isNonEmptyString(searchResultsStore.searchQuery) && (
-                <div
-                  className="legend-marketplace-search-results__search-type-tabs"
-                  role="tablist"
-                  aria-label="Search result type"
-                >
-                  <button
-                    type="button"
-                    role="tab"
-                    aria-selected={true}
-                    tabIndex={0}
-                    className="legend-marketplace-search-results__search-type-tab legend-marketplace-search-results__search-type-tab--active"
-                  >
-                    Data Products
-                  </button>
-                  <button
-                    type="button"
-                    role="tab"
-                    aria-selected={false}
-                    tabIndex={-1}
-                    className="legend-marketplace-search-results__search-type-tab"
-                    onClick={() => {
-                      applicationStore.navigationService.navigator.goToLocation(
-                        generateFieldSearchResultsRoute(
-                          searchResultsStore.searchQuery,
-                        ),
-                      );
+                <div className="legend-marketplace-search-results__search-type-tabs">
+                  <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,
+                          ),
+                        );
+                      }
                     }}
-                  >
-                    Data Fields
-                  </button>
+                    ariaLabel="Search result type"
+                  />
                 </div>
               )}
               <div className="legend-marketplace-search-results__sort-bar__controls">

package/src/pages/TerminalsAddons/LegendMarketplaceTerminalsAddons.tsx

@@ -19,7 +19,6 @@ import { type JSX, useEffect, useCallback } from 'react';
 import { LegendMarketplaceSearchBar } from '../../components/SearchBar/LegendMarketplaceSearchBar.js';
 import {
   Button,
-  ButtonGroup,
   Tooltip,
   Typography,
   List,
@@ -48,6 +47,7 @@ import type { LegendUser } from '@finos/legend-shared';
 import { useLegendMarketplaceBaseStore } from '../../application/providers/LegendMarketplaceFrameworkProvider.js';
 import { PaginationControls } from '../../components/Pagination/PaginationControls.js';
 import { UserRenderer } from '@finos/legend-extension-dsl-data-product';
+import { LegendMarketplaceOptionSelector } from '../../components/OptionSelector/LegendMarketplaceOptionSelector.js';
 
 export const RefinedVendorRadioSelector = observer(
   (props: { vendorDataState: LegendMarketPlaceVendorDataStore }) => {
@@ -70,28 +70,12 @@ export const RefinedVendorRadioSelector = observer(
     );
 
     return (
-      <ButtonGroup variant="outlined">
-        {radioOptions.map((option) => (
-          <Button
-            key={option}
-            onClick={() => onRadioChange(option)}
-            variant={
-              vendorDataState.providerDisplayState === option
-                ? 'contained'
-                : 'outlined'
-            }
-            sx={{
-              fontSize: '12px',
-              backgroundColor:
-                vendorDataState.providerDisplayState === option
-                  ? 'primary'
-                  : 'white',
-            }}
-          >
-            {option}
-          </Button>
-        ))}
-      </ButtonGroup>
+      <LegendMarketplaceOptionSelector
+        options={radioOptions}
+        selectedOption={vendorDataState.providerDisplayState}
+        onChange={onRadioChange}
+        ariaLabel="Vendor data provider type"
+      />
     );
   },
 );

package/src/stores/lakehouse/LegendMarketplaceSearchResultsStore.ts

@@ -82,6 +82,11 @@ export enum SearchResultsViewMode {
   LIST = 'list',
 }
 
+export enum SearchResultViewOption {
+  DATA_PRODUCTS = 'Data Products',
+  DATA_FIELDS = 'Data Fields',
+}
+
 const LEGEND_MARKETPLACE_SETTING_KEY_VIEW_MODE =
   'marketplace.search-results.viewMode';
 

package/src/utils/SearchUtils.tsx

@@ -32,6 +32,7 @@ import {
 import {
   generateLakehouseDataProductPath,
   generateLegacyDataProductPath,
+  generateSdlcDataProductPath,
 } from '../__lib__/LegendMarketplaceNavigation.js';
 import {
   type V1_EntitlementsDataProductDetails,
@@ -69,6 +70,21 @@ export const getSearchResultProjectGAV = (
   }
 };
 
+const hasNonLegacyDataProductLink = (link: string | undefined): boolean => {
+  if (!link) {
+    return false;
+  }
+  try {
+    const url = new URL(link);
+    return (
+      url.pathname.startsWith('/dataProduct/') &&
+      !url.pathname.startsWith('/dataProduct/legacy/')
+    );
+  } catch {
+    return false;
+  }
+};
+
 export const generatePathForDataProductSearchResult = (
   searchResult: DataProductSearchResult,
 ): string | undefined =>
@@ -80,14 +96,23 @@ export const generatePathForDataProductSearchResult = (
       )
     : searchResult.dataProductDetails instanceof
         LegacyDataProductSearchResultDetails
-      ? generateLegacyDataProductPath(
-          generateGAVCoordinates(
-            searchResult.dataProductDetails.groupId,
-            searchResult.dataProductDetails.artifactId,
-            searchResult.dataProductDetails.versionId,
-          ),
-          searchResult.dataProductDetails.path,
-        )
+      ? hasNonLegacyDataProductLink(searchResult.data_product_link)
+        ? generateSdlcDataProductPath(
+            generateGAVCoordinates(
+              searchResult.dataProductDetails.groupId,
+              searchResult.dataProductDetails.artifactId,
+              searchResult.dataProductDetails.versionId,
+            ),
+            searchResult.dataProductDetails.path,
+          )
+        : generateLegacyDataProductPath(
+            generateGAVCoordinates(
+              searchResult.dataProductDetails.groupId,
+              searchResult.dataProductDetails.artifactId,
+              searchResult.dataProductDetails.versionId,
+            ),
+            searchResult.dataProductDetails.path,
+          )
       : undefined;
 
 export const convertEntitlementsDataProductDetailsToSearchResult = (

package/tsconfig.json

@@ -122,6 +122,7 @@
     "./src/components/MarketplaceCard/LegendMarketplaceCard.tsx",
     "./src/components/MarketplaceCard/LegendMarketplaceListItem.tsx",
     "./src/components/MarketplaceSearchFiltersPanel/MarketplaceSearchFiltersPanel.tsx",
+    "./src/components/OptionSelector/LegendMarketplaceOptionSelector.tsx",
     "./src/components/Pagination/PaginationControls.tsx",
     "./src/components/ProviderCard/LegendMarketplaceOrderProfileCard.tsx",
     "./src/components/ProviderCard/LegendMarketplaceTerminalCard.tsx",