From 77b0a78e8569d62800e067da5311964492ce67c7 Mon Sep 17 00:00:00 2001 From: Noah Onyejese <129368606+noahonyejese@users.noreply.github.com> Date: Mon, 9 Sep 2024 10:07:30 +0200 Subject: [PATCH 1/5] feat: Added Edit Tab Label Option --- app/components/chart-selection-tabs.tsx | 65 +++++++++++++++---------- 1 file changed, 38 insertions(+), 27 deletions(-) diff --git a/app/components/chart-selection-tabs.tsx b/app/components/chart-selection-tabs.tsx index babd96c5a..37e43f4fb 100644 --- a/app/components/chart-selection-tabs.tsx +++ b/app/components/chart-selection-tabs.tsx @@ -7,8 +7,7 @@ import { Stack, tabClasses, Theme, - Tooltip, - Typography, + Typography } from "@mui/material"; import { makeStyles } from "@mui/styles"; import clsx from "clsx"; @@ -147,6 +146,14 @@ const TabsEditable = (props: TabsEditableProps) => { const addNewDatasetFlag = useFlag("configurator.add-dataset.new"); + + const switchChart = (key: string) => { + dispatch({ + type: "SWITCH_ACTIVE_CHART", + value: key, + }); + } + return ( <> { activeChartKey: key, }); }} - onChartSwitch={(key) => { - dispatch({ - type: "SWITCH_ACTIVE_CHART", - value: key, - }); - }} + onChartSwitch={switchChart} /> {tabsState.popoverType === "add" ? ( @@ -266,6 +268,20 @@ const TabsEditable = (props: TabsEditableProps) => { }} onClose={handleClose} > + {isConfiguringChart && Edit tab label} + onClick={() => { + switchChart(tabsState.activeChartKey); + dispatch({ + type: "CHART_ACTIVE_FIELD_CHANGED", + value: 'label' + }); + }} + + />} (d.active ? palette.primary.main : palette.secondary.active), }, editIconWrapper: { @@ -621,40 +640,32 @@ const TabContent = (props: { const [_, dispatch] = useConfiguratorState(); const showAddLabel = editable && !label; const addLabel = t({ - id: "chart-selection-tabs.add-label", - message: "Add label", + id: "chart-selection-tabs.no-label", + message: "No label", }); return ( - {label || showAddLabel ? ( - - ) : null} {editable && (