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

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,

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 = ({

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;
   }
 

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}
       />
       <GraphWidgetLegend
-        show={shouldShowLegend}
+        show={showLegend}
         items={enrichedKeys.map((item) => {
           return {
             id: item.key,

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 (
     <StyledContainer id={id}>
       <GraphWidgetChartContainer
@@ -279,7 +275,7 @@ export const GraphWidgetLineChart = ({
         onMouseEnter={handleTooltipMouseEnter}
         onMouseLeave={handleTooltipMouseLeave}
       />
-      <GraphWidgetLegend show={shouldShowLegend} items={legendItems} />
+      <GraphWidgetLegend show={showLegend} items={legendItems} />
     </StyledContainer>
   );
 };