@octopusdeploy/design-system-components
Version:
The design systems component library.
175 lines (174 loc) • 12 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Level2InnerPageLayout = Level2InnerPageLayout;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const material_1 = require("@mui/material");
const design_system_icons_1 = require("@octopusdeploy/design-system-icons");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const react_1 = require("react");
const hooks_1 = require("../../hooks");
const prefersReducedMotion_1 = require("../../utils/prefersReducedMotion");
const Callout_1 = require("../Callout/Callout");
const ErrorSummary_1 = require("../ErrorSummary");
const HeaderSecondary_1 = require("../HeaderSecondary");
const LinearProgress_1 = require("../Progress/LinearProgress");
const ScrollArea_1 = require("../ScrollArea");
const Tab_1 = require("../Tab");
const AdvancedFilterPanel_1 = require("./AdvancedFilterPanel");
const Filters_1 = require("./Filters");
const useAdvancedFiltersVisibility_1 = require("./useAdvancedFiltersVisibility");
function Level2InnerPageLayout({ header, busy = false, description, callout, errors, fullWidth, ...contentProps }) {
const hasTabs = "tabs" in contentProps;
const currentTab = hasTabs ? contentProps.tabs.find((tab) => tab.value === contentProps.currentTab) : undefined;
const content = hasTabs ? currentTab?.content : contentProps.children;
const filters = hasTabs ? currentTab?.filters : contentProps.filters;
const pagination = hasTabs ? currentTab?.pagination : contentProps.pagination;
const sidebar = hasTabs ? currentTab?.sidebar : contentProps.sidebar;
const tabCallout = hasTabs ? currentTab?.callout : undefined;
const legacyTabs = hasTabs ? undefined : contentProps.legacyTabs;
const isSmallScreen = (0, hooks_1.useIsLegacySmallScreen)();
const [isAdvancedFiltersVisible, setIsAdvancedFiltersVisible] = (0, useAdvancedFiltersVisibility_1.useAdvancedFiltersVisibility)(filters?.advancedFilters);
const paginationAtBottom = pagination && pagination.placement !== "top";
const paginationAtTop = pagination && pagination.placement !== "bottom";
const hasAdvancedFilters = filters?.advancedFilters !== undefined;
const hasFilters = (filters?.inputs && filters.inputs.length > 0) || hasAdvancedFilters || filters?.onShareFilters !== undefined;
const hasFilterAndPaginationSection = hasFilters || filters?.filtersSummary !== undefined || paginationAtTop;
const constrainedWidthStyles = fullWidth ? undefined : pageContentStyles.containerMaxWidth;
const handleTabChange = hasTabs
? (event, value) => {
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
contentProps.onTabChanged(value);
}
: undefined;
const scrollArea = (0, ScrollArea_1.useCurrentScrollArea)();
const onErrorPanelsRef = (0, react_1.useCallback)((element) => {
if (element) {
scrollArea.scrollTo({ top: 0, behavior: (0, prefersReducedMotion_1.prefersReducedMotion)() ? "auto" : "smooth" });
}
}, [scrollArea]);
function hasExtraPageInfo() {
return description || (errors && errors.length > 0) || callout;
}
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(pageContentStyles.container, constrainedWidthStyles), children: [(0, jsx_runtime_1.jsx)(LinearProgress_1.LinearProgress, { variant: "indeterminate", show: busy }), (0, jsx_runtime_1.jsx)(HeaderSecondary_1.HeaderSecondary, { breadcrumbsItems: header.breadcrumbs, showBreadcrumbBackIcon: header.showBreadcrumbBackIcon, title: header.title, titleComplementaryText: header.titleComplementaryText, titleChip: header.chip, titleBadge: header.badge, titleSecondaryBadge: header.secondaryBadge, titleAccessory: header.contextSelector, titleStatusIcon: header.logo, primaryAction: header.primaryAction, pageActions: header.pageActions, overflowActions: header.overflowActions, isStickied: true }), hasExtraPageInfo() && ((0, jsx_runtime_1.jsxs)("div", { className: pageContentStyles.extraPageInfoContainer, children: [description, errors && errors.length > 0 && ((0, jsx_runtime_1.jsx)("div", { ref: onErrorPanelsRef, className: pageContentStyles.errorPanelsContainer, children: errors?.map((error, index) => ((0, jsx_runtime_1.jsx)(ErrorSummary_1.ErrorSummary, { error: error }, index))) })), (isCustomCallout(callout) || isDefaultCallout(callout)) && ((0, jsx_runtime_1.jsxs)("div", { className: pageContentStyles.calloutContainer, children: [isCustomCallout(callout) && callout.content, isDefaultCallout(callout) && (0, jsx_runtime_1.jsx)(Callout_1.Callout, { ...callout, ...getCalloutTitleProps(callout.title), canClose: !!callout.onClose })] }))] })), hasTabs && contentProps.tabs.length > 0 ? ((0, jsx_runtime_1.jsx)(Tab_1.Tabs, { value: contentProps.currentTab, onChange: handleTabChange, variant: "scrollable", children: contentProps.tabs.map((tab) => ((0, jsx_runtime_1.jsx)(Tab_1.Tab, { value: tab.value, label: tab.warning ? (0, jsx_runtime_1.jsx)(TabLabelWithWarning, { label: tab.label, warning: tab.warning }) : tab.label }, tab.value))) })) : (legacyTabs), hasTabs && sidebar === undefined && ((0, jsx_runtime_1.jsx)("div", { className: pageContentStyles.sectionsWithSidebarsTopBorder })), tabCallout && ((0, jsx_runtime_1.jsxs)("div", { className: pageContentStyles.tabCalloutContainer, children: [isCustomCallout(tabCallout) && tabCallout.content, isDefaultCallout(tabCallout) && (0, jsx_runtime_1.jsx)(Callout_1.Callout, { ...tabCallout, ...getCalloutTitleProps(tabCallout.title), canClose: !!tabCallout.onClose })] })), hasFilterAndPaginationSection && ((0, jsx_runtime_1.jsxs)("div", { className: pageContentStyles.filtersAndPaginationSection, children: [(0, jsx_runtime_1.jsxs)("div", { className: pageContentStyles.filtersAndPaginationRow, children: [hasFilters && ((0, jsx_runtime_1.jsx)(Filters_1.Filters, { inputs: filters.inputs, showAdvancedFiltersToggle: hasAdvancedFilters, isAdvancedFiltersVisible: isAdvancedFiltersVisible, onAdvancedFiltersVisibilityChanged: setIsAdvancedFiltersVisible, activeFilterCount: filters.advancedFilters?.activeFilterCount, onShareFilters: filters.onShareFilters })), paginationAtTop && (0, jsx_runtime_1.jsx)("div", { className: pageContentStyles.paginationContainer, children: pagination.ui })] }), filters?.filtersSummary && (0, jsx_runtime_1.jsx)(Filters_1.FiltersSummary, { summary: filters.filtersSummary })] })), (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(pageContentStyles.sectionsWithSidebars, {
[pageContentStyles.sectionsWithSidebarsVertical]: isSmallScreen,
[pageContentStyles.sectionsWithSidebarsTopBorder]: sidebar !== undefined,
}), children: [filters?.advancedFilters && isAdvancedFiltersVisible && ((0, jsx_runtime_1.jsx)("div", { className: pageContentStyles.advancedFiltersContainer, children: (0, jsx_runtime_1.jsx)(AdvancedFilterPanel_1.AdvancedFilterPanel, { content: filters.advancedFilters.content, onResetFilter: filters.advancedFilters.onResetFilter, isResetEnabled: filters.advancedFilters.hasUserSelectedValues, parentOrientation: isSmallScreen ? "column" : "row" }) })), (0, jsx_runtime_1.jsx)("div", { className: pageContentStyles.contentBox, children: content }), sidebar && (0, jsx_runtime_1.jsx)(Sidebar, { content: sidebar, parentOrientation: isSmallScreen ? "column" : "row" })] }), paginationAtBottom && (0, jsx_runtime_1.jsx)("div", { className: pageContentStyles.footerPaginationContainer, children: pagination.ui })] }));
}
function isCustomCallout(callout) {
return !!callout && "type" in callout && callout.type === "custom";
}
function isDefaultCallout(callout) {
return !!callout && "messageState" in callout;
}
function getCalloutTitleProps(title) {
if (!title) {
return { title, hideTitle: true };
}
return {
title,
hideTitle: false,
};
}
const pageContentStyles = {
advancedFiltersContainer: (0, css_1.css)({
borderRight: `solid 1px ${design_system_tokens_1.themeTokens.color.border.primary}`,
}),
container: (0, css_1.css)({
display: "flex",
flexDirection: "column",
borderRadius: design_system_tokens_1.borderRadius.small,
border: `1px solid ${design_system_tokens_1.themeTokens.color.border.primary}`,
minHeight: 640,
marginLeft: "auto",
marginRight: "auto",
font: design_system_tokens_1.text.body.regular.medium,
}),
containerMaxWidth: (0, css_1.css)({
maxWidth: 1280,
}),
extraPageInfoContainer: (0, css_1.css)({
display: "flex",
flexDirection: "column",
gap: design_system_tokens_1.space[16],
paddingBottom: design_system_tokens_1.space[16],
}),
errorPanelsContainer: (0, css_1.css)({
padding: `0 ${design_system_tokens_1.space[16]}`,
display: "flex",
flexDirection: "column",
gap: design_system_tokens_1.space[16],
}),
calloutContainer: (0, css_1.css)({
padding: `0 ${design_system_tokens_1.space[16]}`,
display: "flex",
flexDirection: "column",
gap: design_system_tokens_1.space[16],
}),
tabCalloutContainer: (0, css_1.css)({
padding: `${design_system_tokens_1.space[16]} ${design_system_tokens_1.space[16]} 0`,
}),
filtersAndPaginationSection: (0, css_1.css)({
padding: `${design_system_tokens_1.space[8]} ${design_system_tokens_1.space[16]}`,
}),
filtersAndPaginationRow: (0, css_1.css)({
display: "flex",
gap: design_system_tokens_1.space[8],
justifyContent: "space-between",
// Bottom-aligned to keep the pagination controls level with the filters' input row, which
// sits at the bottom of the filter block when the filter inputs have stacked labels.
alignItems: "flex-end",
}),
sectionsWithSidebars: (0, css_1.css)({
display: "flex",
flex: 1,
color: design_system_tokens_1.themeTokens.color.text.primary,
}),
sectionsWithSidebarsTopBorder: (0, css_1.css)({
borderTop: `1px solid ${design_system_tokens_1.themeTokens.color.border.primary}`,
}),
sectionsWithSidebarsVertical: (0, css_1.css)({
flexDirection: "column",
}),
contentBox: (0, css_1.css)({
display: "flex",
flexDirection: "column",
flex: 1,
minWidth: 0,
}),
paginationContainer: (0, css_1.css)({
marginLeft: "auto",
}),
footerPaginationContainer: (0, css_1.css)({
marginLeft: "auto",
padding: design_system_tokens_1.space[16],
}),
};
function Sidebar({ content, parentOrientation }) {
return ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(sidebarStyles.root, {
[sidebarStyles.inRow]: parentOrientation === "row",
[sidebarStyles.inColumn]: parentOrientation === "column",
}), children: content }));
}
const sidebarStyles = {
root: (0, css_1.css)({
padding: `0 ${design_system_tokens_1.space[16]}`,
}),
inRow: (0, css_1.css)({
width: "17.5rem",
borderLeft: `1px solid ${design_system_tokens_1.themeTokens.color.border.primary}`,
}),
inColumn: (0, css_1.css)({
borderTop: `1px solid ${design_system_tokens_1.themeTokens.color.border.primary}`,
}),
};
function TabLabelWithWarning({ label, warning }) {
return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: warning, children: (0, jsx_runtime_1.jsxs)("div", { className: tabLabelWithWarningStyles.root, children: [label, (0, jsx_runtime_1.jsx)(design_system_icons_1.ExclamationTriangleIcon, { size: 24, color: design_system_tokens_1.themeTokens.color.icon.warning })] }) }));
}
const tabLabelWithWarningStyles = {
root: (0, css_1.css)({
display: "flex",
gap: design_system_tokens_1.space[4],
alignItems: "center",
}),
};