@finos/legend-application-marketplace
Version:
Legend Marketplace application core
111 lines • 6.5 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } 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 { clsx } from '@finos/legend-art';
import { AppBar, Box, Container, Toolbar } from '@mui/material';
import { observer } from 'mobx-react-lite';
import { LEGEND_MARKETPLACE_TEST_ID } from '../../__lib__/LegendMarketplaceTesting.js';
import { ReleaseLogManager, ReleaseNotesManager, useApplicationStore, } from '@finos/legend-application';
import { LEGEND_MARKETPLACE_ROUTE_PATTERN } from '../../__lib__/LegendMarketplaceNavigation.js';
import { LegendMarketplaceIconToolbar } from './LegendMarketplaceIconToolbar.js';
import { matchPath } from '@finos/legend-application/browser';
import { useEffect, useState } from 'react';
import { LegendMarketplaceTelemetryHelper } from '../../__lib__/LegendMarketplaceTelemetryHelper.js';
import { useAuth } from 'react-oidc-context';
const HEADER_HEIGHT = 64;
const MIN_HEADER_OPACITY = 0.75;
const LegendMarketPlaceHeaderTabs = observer((props) => {
const { pages } = props;
const applicationStore = useApplicationStore();
const navigateToPage = (route) => {
applicationStore.navigationService.navigator.goToLocation(route);
};
return (_jsx(Box, { className: "legend-marketplace-header__tabs", children: pages.map((page) => {
const isSelectedTab = matchPath(page.urlRoute, applicationStore.navigationService.navigator.getCurrentLocation()) !== null;
return (_jsx("a", { className: clsx('legend-marketplace-header__tab', {
'legend-marketplace-header__tab--selected': isSelectedTab,
}), onClick: () => {
navigateToPage(page.urlRoute);
LegendMarketplaceTelemetryHelper.logEvent_ClickHeadertab(applicationStore.telemetryService, page.title);
}, children: page.title }, page.title));
}) }));
});
const LegendMarketplaceBaseHeader = observer((props) => {
const { homeUrl, pages, showIcons } = props;
const applicationStore = useApplicationStore();
const auth = useAuth();
const isDarkMode = !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
const [headerBackdropOpacity, setHeaderBackdropOpacity] = useState(1);
const [headerBlurOpacity, setHeaderBlurOpacity] = useState(0);
// The below handles the scroll effect for the header's blur effect. When the user is at the top of the page,
// the header is fully opaque (i.e., no blur), so we hide the blur component and show the backdrop image component
// (which is rendered behind the header). As the user scrolls down, we increase the opacity of the blur component
// while reducing the opacity of the backdrop image component until a certain threshold.
useEffect(() => {
const appElement = document.querySelector('.app');
const listenerCallback = () => {
const scrollTop = appElement?.scrollTop ?? 0;
const newBackdropOpacity = Math.max(MIN_HEADER_OPACITY, Math.min(1, 1 - (scrollTop - HEADER_HEIGHT) / HEADER_HEIGHT));
const newBlurOpacity = Math.max(0, Math.min(1, (scrollTop - HEADER_HEIGHT) / HEADER_HEIGHT));
setHeaderBackdropOpacity(newBackdropOpacity);
setHeaderBlurOpacity(newBlurOpacity);
};
if (appElement) {
appElement.addEventListener('scroll', listenerCallback);
}
return () => {
if (appElement) {
appElement.removeEventListener('scroll', listenerCallback);
}
};
}, []);
useEffect(() => {
if (auth.isAuthenticated) {
applicationStore.releaseNotesService.updateViewedVersion();
}
}, [applicationStore, auth.isAuthenticated]);
const navigateToHome = () => {
applicationStore.navigationService.navigator.goToLocation(homeUrl);
};
return (_jsxs(AppBar, { position: "sticky", className: "legend-marketplace-header", "data-testid": LEGEND_MARKETPLACE_TEST_ID.HEADER, children: [_jsx("div", { className: "legend-marketplace-header__backdrop-image", style: { opacity: headerBackdropOpacity } }), _jsx("div", { className: "legend-marketplace-header__backdrop", style: { opacity: headerBlurOpacity } }), _jsx(Container, { className: "legend-marketplace-header__container", maxWidth: false, children: _jsxs(Toolbar, { disableGutters: true, children: [_jsx("div", { className: "legend-marketplace-header__name", onClick: () => navigateToHome(), children: _jsx("img", { src: isDarkMode
? '/assets/headerLogoDark.svg'
: '/assets/headerLogoLight.svg', alt: "Goldman Sachs Logo", className: "legend-marketplace-header__logo" }) }), _jsx(LegendMarketPlaceHeaderTabs, { pages: pages }), showIcons && _jsx(LegendMarketplaceIconToolbar, {})] }) }), _jsx(ReleaseLogManager, {}), _jsx(ReleaseNotesManager, {})] }));
});
export const MarketplaceLakehouseHeader = observer(() => {
return (_jsx(LegendMarketplaceBaseHeader, { headerName: "", homeUrl: LEGEND_MARKETPLACE_ROUTE_PATTERN.HOME_PAGE, pages: [
{
title: 'Data Products',
urlRoute: LEGEND_MARKETPLACE_ROUTE_PATTERN.DATA_PRODUCT_SEARCH_RESULTS,
},
{
title: 'Data APIs',
urlRoute: LEGEND_MARKETPLACE_ROUTE_PATTERN.DATA_APIS,
},
{
title: 'Intelligence and AI Agents',
urlRoute: LEGEND_MARKETPLACE_ROUTE_PATTERN.AGENTS,
},
{
title: 'Terminals and Addons',
urlRoute: LEGEND_MARKETPLACE_ROUTE_PATTERN.TERMINAL_ADD_ONS,
},
{
title: 'GS Inventory',
urlRoute: LEGEND_MARKETPLACE_ROUTE_PATTERN.INVENTORY,
},
], showIcons: true }));
});
//# sourceMappingURL=LegendMarketplaceHeader.js.map