Merge pull request #1730 from visualize-admin/feat/improve-chart-tab-…

…titles Feat/improve chart tab titles
visualize-admin · Sep 9, 2024 · d3dc282 · d3dc282
2 parents 296411f + ff533c4
commit d3dc282
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 36 deletions.
diff --git a/app/components/chart-selection-tabs.tsx b/app/components/chart-selection-tabs.tsx
@@ -6,8 +6,7 @@ import {
   Stack,
   tabClasses,
   Theme,
-  Tooltip,
-  Typography,
+  Typography
 } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import clsx from "clsx";
@@ -146,6 +145,14 @@ const TabsEditable = (props: TabsEditableProps) => {
 
   const addNewDatasetFlag = useFlag("configurator.add-dataset.new");
 
+
+  const switchChart = (key: string) => {
+    dispatch({
+      type: "SWITCH_ACTIVE_CHART",
+      value: key,
+    });
+  }
+
   return (
     <>
       <TabsInner
@@ -169,12 +176,7 @@ const TabsEditable = (props: TabsEditableProps) => {
             activeChartKey: key,
           });
         }}
-        onChartSwitch={(key) => {
-          dispatch({
-            type: "SWITCH_ACTIVE_CHART",
-            value: key,
-          });
-        }}
+        onChartSwitch={switchChart}
       />
 
       {tabsState.popoverType === "add" ? (
@@ -274,6 +276,20 @@ const TabsEditable = (props: TabsEditableProps) => {
           }}
           onClose={handleClose}
         >
+      {isConfiguringChart &&  <MenuActionItem 
+          as="menuitem"
+          type="button"
+          iconName="text"
+          label={<Trans id="chart-controls.edit-tab-label" >Edit tab label</Trans>}
+          onClick={() => {
+                switchChart(tabsState.activeChartKey);
+                dispatch({
+                  type: "CHART_ACTIVE_FIELD_CHANGED",
+                  value: 'label'
+                });
+          }}
+
+        />}
           <DuplicateChartMenuActionItem
             chartConfig={getChartConfig(state, tabsState.activeChartKey)}
             onSuccess={handleClose}
@@ -574,6 +590,9 @@ export const useIconStyles = makeStyles<
   },
   chartIconWrapper: {
     minWidth: "fit-content",
+    display: 'flex',
+    alignItems: 'center',
+    gap: spacing(2),
     color: (d) => (d.active ? palette.primary.main : palette.secondary.active),
   },
   editIconWrapper: {
@@ -628,40 +647,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 (
     <Flex className={classes.root}>
-      <Button
-        className={classes.chartIconWrapper}
-        variant="text"
-        onClick={onSwitchClick}
-      >
-        <Icon name={iconName} />
-      </Button>
       {label || showAddLabel ? (
-        <Tooltip title={label || addLabel} enterDelay={750}>
           <Button
             variant="text"
-            className={classes.label}
+            className={classes.chartIconWrapper}  
             onClick={() => {
               onSwitchClick?.();
-              if (editable) {
-                dispatch({
-                  type: "CHART_ACTIVE_FIELD_CHANGED",
-                  value: "label",
-                });
-              }
+           if (editable) {
+              dispatch({
+                type: "CHART_ACTIVE_FIELD_CHANGED",
+                value: undefined
+              });
             }}
+          }
             sx={{
               color: (t) =>
                 label ? "inherit" : `${t.palette.grey[500]} !important`,
             }}
           >
-            {label || `[ ${addLabel} ]`}
+             <Icon name={iconName} />
+           {label || `[ ${addLabel} ]`}
           </Button>
-        </Tooltip>
       ) : null}
       {editable && (
         <Button

diff --git a/app/configurator/components/annotators.tsx b/app/configurator/components/annotators.tsx
@@ -136,6 +136,16 @@ export const ChartAnnotator = () => {
           }
           mainLabel={getFieldLabel("description")}
         />
+          <ChartAnnotatorTabField
+          value="label"
+          icon="layoutTab"
+          emptyValueWarning={
+            <Trans id="controls.annotator.add-tab-label-warning">
+             Please add a tab label
+            </Trans>
+          }
+          mainLabel={getFieldLabel("label")}
+        />
       </ControlSectionContent>
     </ControlSection>
   );
@@ -189,6 +199,16 @@ export const LayoutAnnotator = () => {
           }
           mainLabel={getFieldLabel("description")}
         />
+        <LayoutAnnotatorTabField
+          value="label"
+          icon="layoutTab"
+          emptyValueWarning={
+            <Trans id="controls.annotator.add-tab-label-warning">
+              Please add a tab label
+            </Trans>
+          }
+          mainLabel={getFieldLabel("label")}
+        />
       </ControlSectionContent>
     </ControlSection>
   );

diff --git a/app/configurator/components/field.tsx b/app/configurator/components/field.tsx
@@ -638,7 +638,7 @@ export const ChartAnnotatorTabField = (props: AnnotatorTabFieldProps) => {
 };
 
 export const LayoutAnnotatorTabField = (
-  props: AnnotatorTabFieldProps<"title" | "description">
+  props: AnnotatorTabFieldProps<"title" | "description" | "label">
 ) => {
   const { value, emptyValueWarning, ...tabProps } = props;
   const fieldProps = useActiveLayoutField({ value });

diff --git a/app/locales/de/messages.po b/app/locales/de/messages.po
@@ -172,6 +172,10 @@ msgstr "Duplizieren"
 msgid "chart-controls.edit"
 msgstr "Bearbeiten"
 
+#: app/components/chart-selection-tabs.tsx
+msgid "chart-controls.edit-tab-label"
+msgstr "Tab titel editieren"
+
 #: app/components/dataset-metadata.tsx
 msgid "chart-controls.sparql-query"
 msgstr "SPARQL-Abfrage"
@@ -197,8 +201,8 @@ msgid "chart-selection-tabs.add-chart-same-dataset.caption"
 msgstr "Fügen Sie ein Diagramm basierend auf demselben Datensatz hinzu"
 
 #: app/components/chart-selection-tabs.tsx
-msgid "chart-selection-tabs.add-label"
-msgstr ""
+msgid "chart-selection-tabs.no-label"
+msgstr "Ohne Titel"
 
 #: app/configurator/components/dataset-control-section.tsx
 msgid "chart.datasets.add"
@@ -297,6 +301,11 @@ msgstr "Animation"
 msgid "controls.annotator.add-description-warning"
 msgstr "Fügen Sie eine Beschreibung hinzu"
 
+#: app/configurator/components/annotators.tsx
+#: app/configurator/components/annotators.tsx
+msgid "controls.annotator.add-tab-label-warning"
+msgstr "Please add a tab label"
+
 #: app/configurator/components/annotators.tsx
 #: app/configurator/components/annotators.tsx
 msgid "controls.annotator.add-title-warning"

diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po
@@ -172,6 +172,10 @@ msgstr "Duplicate"
 msgid "chart-controls.edit"
 msgstr "Edit"
 
+#: app/components/chart-selection-tabs.tsx
+msgid "chart-controls.edit-tab-label"
+msgstr "Edit tab label"
+
 #: app/components/dataset-metadata.tsx
 msgid "chart-controls.sparql-query"
 msgstr "SPARQL query"
@@ -197,8 +201,8 @@ msgid "chart-selection-tabs.add-chart-same-dataset.caption"
 msgstr "Add chart based on the same dataset"
 
 #: app/components/chart-selection-tabs.tsx
-msgid "chart-selection-tabs.add-label"
-msgstr "Add label"
+msgid "chart-selection-tabs.no-label"
+msgstr "No label"
 
 #: app/configurator/components/dataset-control-section.tsx
 msgid "chart.datasets.add"
@@ -297,6 +301,11 @@ msgstr "Animation"
 msgid "controls.annotator.add-description-warning"
 msgstr "Please add a description"
 
+#: app/configurator/components/annotators.tsx
+#: app/configurator/components/annotators.tsx
+msgid "controls.annotator.add-tab-label-warning"
+msgstr "Please add a tab label"
+
 #: app/configurator/components/annotators.tsx
 #: app/configurator/components/annotators.tsx
 msgid "controls.annotator.add-title-warning"

diff --git a/app/locales/fr/messages.po b/app/locales/fr/messages.po
@@ -172,6 +172,10 @@ msgstr "Dupliquer"
 msgid "chart-controls.edit"
 msgstr "Modifier"
 
+#: app/components/chart-selection-tabs.tsx
+msgid "chart-controls.edit-tab-label"
+msgstr "Modifier le nom de l'onglet"
+
 #: app/components/dataset-metadata.tsx
 msgid "chart-controls.sparql-query"
 msgstr "Requête SPARQL"
@@ -197,8 +201,8 @@ msgid "chart-selection-tabs.add-chart-same-dataset.caption"
 msgstr "Ajouter un graphique basé sur le même ensemble de données"
 
 #: app/components/chart-selection-tabs.tsx
-msgid "chart-selection-tabs.add-label"
-msgstr ""
+msgid "chart-selection-tabs.no-label"
+msgstr "Pas de Titre"
 
 #: app/configurator/components/dataset-control-section.tsx
 msgid "chart.datasets.add"
@@ -297,6 +301,11 @@ msgstr "Animation"
 msgid "controls.annotator.add-description-warning"
 msgstr "Ajoutez une description au graphique"
 
+#: app/configurator/components/annotators.tsx
+#: app/configurator/components/annotators.tsx
+msgid "controls.annotator.add-tab-label-warning"
+msgstr "Veuillez ajouter une étiquette d'onglet"
+
 #: app/configurator/components/annotators.tsx
 #: app/configurator/components/annotators.tsx
 msgid "controls.annotator.add-title-warning"

diff --git a/app/locales/it/messages.po b/app/locales/it/messages.po
@@ -172,6 +172,10 @@ msgstr "Duplicare"
 msgid "chart-controls.edit"
 msgstr "Modifica"
 
+#: app/components/chart-selection-tabs.tsx
+msgid "chart-controls.edit-tab-label"
+msgstr "Modifica etichetta scheda"
+
 #: app/components/dataset-metadata.tsx
 msgid "chart-controls.sparql-query"
 msgstr "SPARQL query"
@@ -197,8 +201,8 @@ msgid "chart-selection-tabs.add-chart-same-dataset.caption"
 msgstr "Aggiungi grafico basato sullo stesso set di dati"
 
 #: app/components/chart-selection-tabs.tsx
-msgid "chart-selection-tabs.add-label"
-msgstr ""
+msgid "chart-selection-tabs.no-label"
+msgstr "Senza etichetta"
 
 #: app/configurator/components/dataset-control-section.tsx
 msgid "chart.datasets.add"
@@ -297,6 +301,11 @@ msgstr "Animazione"
 msgid "controls.annotator.add-description-warning"
 msgstr "Aggiungi una descrizione"
 
+#: app/configurator/components/annotators.tsx
+#: app/configurator/components/annotators.tsx
+msgid "controls.annotator.add-tab-label-warning"
+msgstr "Please add a tab label"
+
 #: app/configurator/components/annotators.tsx
 #: app/configurator/components/annotators.tsx
 msgid "controls.annotator.add-title-warning"