From ab3d48383baeda04933b8bf92369eff5c2415c41 Mon Sep 17 00:00:00 2001 From: nitin <142569587+ehconitin@users.noreply.github.com> Date: Tue, 25 Nov 2025 18:08:09 +0530 Subject: [PATCH] dashboards fast follows: tabs border changed to outline and legends factorization (#16049) closes https://discord.com/channels/1130383047699738754/1440633019042889828 https://discord.com/channels/1130383047699738754/1442819106880356363 --- .../components/PageLayoutTabList.tsx | 21 ++++++++++++++++++- .../PageLayoutTabListReorderableTab.tsx | 10 +++------ .../graph/components/GraphWidgetLegend.tsx | 12 ++++++++++- .../components/GraphWidgetBarChart.tsx | 7 +------ .../components/GraphWidgetLineChart.tsx | 6 +----- 5 files changed, 36 insertions(+), 20 deletions(-) diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabList.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabList.tsx index 3c3b0212b4..0a4a88f0bd 100644 --- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabList.tsx +++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabList.tsx @@ -203,6 +203,10 @@ export const PageLayoutTabList = ({ const pageLayoutId = useAvailableComponentInstanceIdOrThrow( PageLayoutComponentInstanceContext, ); + const tabSettingsOpenTabId = useRecoilComponentValue( + pageLayoutTabSettingsOpenTabIdComponentState, + pageLayoutId, + ); const setTabSettingsOpenTabId = useSetRecoilComponentState( pageLayoutTabSettingsOpenTabIdComponentState, pageLayoutId, @@ -220,15 +224,26 @@ export const PageLayoutTabList = ({ [setTabSettingsOpenTabId, navigatePageLayoutCommandMenu], ); + const isTabSettingsOpen = isDefined(tabSettingsOpenTabId); + const handleSelectTab = useCallback( (tabId: string) => { if (isPageLayoutInEditMode && activeTabId === tabId) { openTabSettings(tabId); return; } + if (isPageLayoutInEditMode && isTabSettingsOpen) { + openTabSettings(tabId); + } selectTab(tabId); }, - [isPageLayoutInEditMode, activeTabId, openTabSettings, selectTab], + [ + isPageLayoutInEditMode, + activeTabId, + isTabSettingsOpen, + openTabSettings, + selectTab, + ], ); const handleSelectTabFromDropdown = useCallback( @@ -238,11 +253,15 @@ export const PageLayoutTabList = ({ closeOverflowDropdown(); return; } + if (isPageLayoutInEditMode && isTabSettingsOpen) { + openTabSettings(tabId); + } selectTabFromDropdown(tabId); }, [ isPageLayoutInEditMode, activeTabId, + isTabSettingsOpen, openTabSettings, closeOverflowDropdown, selectTabFromDropdown, diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListReorderableTab.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListReorderableTab.tsx index 105caf0302..89a49723fb 100644 --- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListReorderableTab.tsx +++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListReorderableTab.tsx @@ -3,7 +3,6 @@ import { Draggable } from '@hello-pangea/dnd'; import { pageLayoutTabSettingsOpenTabIdComponentState } from '@/page-layout/states/pageLayoutTabSettingsOpenTabIdComponentState'; import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; -import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { StyledTabContainer, TabContent } from 'twenty-ui/input'; @@ -16,12 +15,9 @@ type PageLayoutTabListReorderableTabProps = { }; const StyledTabContent = styled(TabContent)<{ isBeingEdited: boolean }>` - ${({ isBeingEdited, theme }) => - isBeingEdited && - css` - border: 1px solid ${theme.color.blue}; - border-radius: ${theme.border.radius.sm}; - `} + outline: ${({ isBeingEdited, theme }) => + isBeingEdited ? `1px solid ${theme.color.blue}` : 'none'}; + outline-offset: -1px; `; export const PageLayoutTabListReorderableTab = ({ diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegend.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegend.tsx index 4197ffb746..6181455a27 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegend.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegend.tsx @@ -1,3 +1,4 @@ +import { CHART_LEGEND_ITEM_THRESHOLD } from '@/page-layout/widgets/graph/constants/ChartLegendItemThreshold'; import styled from '@emotion/styled'; export type GraphWidgetLegendItem = { @@ -42,7 +43,16 @@ export const GraphWidgetLegend = ({ items, show = true, }: GraphWidgetLegendProps) => { - if (!show || items.length === 0) { + const areThereTooManyItems = items.length > CHART_LEGEND_ITEM_THRESHOLD; + + const isItASingleItem = items.length === 1; + + const thereAreNoItems = items.length === 0; + + const shouldShowLegend = + show && !areThereTooManyItems && !isItASingleItem && !thereAreNoItems; + + if (!shouldShowLegend) { return null; } diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx index 6093834fa5..f99f0763aa 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx @@ -33,7 +33,6 @@ import { useCallback, useMemo, useRef, useState, type MouseEvent } from 'react'; import { isDefined } from 'twenty-shared/utils'; import { useDebouncedCallback } from 'use-debounce'; -import { CHART_LEGEND_ITEM_THRESHOLD } from '@/page-layout/widgets/graph/constants/ChartLegendItemThreshold'; import { graphWidgetBarTooltipComponentState } from '@/page-layout/widgets/graph/graphWidgetBarChart/states/graphWidgetBarTooltipComponentState'; import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState'; @@ -150,10 +149,6 @@ export const GraphWidgetBarChart = ({ debouncedHideTooltip(); }, [debouncedHideTooltip]); - const areThereTooManyKeys = keys.length > CHART_LEGEND_ITEM_THRESHOLD; - - const shouldShowLegend = showLegend && !areThereTooManyKeys; - const { axisBottom: axisBottomConfig, axisLeft: axisLeftConfig } = getBarChartAxisConfigs({ width: chartWidth, @@ -296,7 +291,7 @@ export const GraphWidgetBarChart = ({ onMouseLeave={handleTooltipMouseLeave} /> { return { id: item.key, diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/components/GraphWidgetLineChart.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/components/GraphWidgetLineChart.tsx index cf44cf81df..4fd1fb2326 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/components/GraphWidgetLineChart.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/components/GraphWidgetLineChart.tsx @@ -1,6 +1,5 @@ import { GraphWidgetChartContainer } from '@/page-layout/widgets/graph/components/GraphWidgetChartContainer'; import { GraphWidgetLegend } from '@/page-layout/widgets/graph/components/GraphWidgetLegend'; -import { CHART_LEGEND_ITEM_THRESHOLD } from '@/page-layout/widgets/graph/constants/ChartLegendItemThreshold'; import { CustomCrosshairLayer, type SliceHoverData, @@ -202,9 +201,6 @@ export const GraphWidgetLineChart = ({ ); const axisLeftConfig = getLineChartAxisLeftConfig(yAxisLabel, formatOptions); - const areThereTooManySeries = data.length > CHART_LEGEND_ITEM_THRESHOLD; - const shouldShowLegend = showLegend && !areThereTooManySeries; - return ( - + ); };