feat: Add warning on annotator fields

visualize-admin · Nov 8, 2022 · b0fef1a · b0fef1a
1 parent 3143284
commit b0fef1a
Show file tree

Hide file tree

Showing 8 changed files with 133 additions and 55 deletions.
diff --git a/app/configurator/components/chart-annotator.tsx b/app/configurator/components/chart-annotator.tsx
@@ -11,20 +11,18 @@ import { AnnotatorTabField } from "@/configurator/components/field";
 import { getFieldLabel } from "@/configurator/components/field-i18n";
 import { InteractiveFiltersConfigurator } from "@/configurator/interactive-filters/interactive-filters-configurator";
 import SvgIcExclamation from "@/icons/components/IcExclamation";
-import { useConfiguratorState } from "@/src";
+import { useConfiguratorState, useLocale } from "@/src";
 
 import { ConfiguratorStateConfiguringChart } from "../config-types";
 import { isConfiguring } from "../configurator-state";
 
 const WarnTitleDescription = () => {
   const [state] = useConfiguratorState(isConfiguring);
+  const locale = useLocale();
   const hasSomeTitleOrDescription = React.useMemo(() => {
     const { title, description } = state.meta;
-    return (
-      Object.values(title).some((x) => x != "") ||
-      Object.values(description).some((x) => x != "")
-    );
-  }, [state.meta]);
+    return title[locale] !== "" && description[locale] !== "";
+  }, [state.meta, locale]);
   return hasSomeTitleOrDescription ? null : (
     <Tooltip
       arrow
@@ -55,13 +53,23 @@ export const TitleAndDescriptionConfigurator = () => {
         <AnnotatorTabField
           value={"title"}
           icon="text"
-          label={getFieldLabel("title")}
-        ></AnnotatorTabField>
+          emptyValueWarning={
+            <Trans id="controls.annotator.add-title-warning">
+              Please add a title
+            </Trans>
+          }
+          mainLabel={getFieldLabel("title")}
+        />
         <AnnotatorTabField
           value={"description"}
           icon="description"
-          label={getFieldLabel("description")}
-        ></AnnotatorTabField>
+          emptyValueWarning={
+            <Trans id="controls.annotator.add-description-warning">
+              Please add a description
+            </Trans>
+          }
+          mainLabel={getFieldLabel("description")}
+        />
       </ControlSectionContent>
     </ControlSection>
   );

diff --git a/app/configurator/components/chart-controls/control-tab.tsx b/app/configurator/components/chart-controls/control-tab.tsx
@@ -40,7 +40,7 @@ export const ControlTab = ({
         <ControlTabButtonInner
           iconName={getIconName(value)}
           upperLabel={getFieldLabel(labelId)}
-          lowerLabel={
+          mainLabel={
             component ? (
               component.label
             ) : (
@@ -82,7 +82,7 @@ export const OnOffControlTab = ({
       <ControlTabButton checked={checked} value={value} onClick={onClick}>
         <ControlTabButtonInner
           iconName={getIconName(icon)}
-          lowerLabel={label}
+          mainLabel={label}
           checked={checked}
           isActive={active}
           showIsActive
@@ -92,21 +92,27 @@ export const OnOffControlTab = ({
   );
 };
 
+export type AnnotatorTabProps = {
+  disabled?: boolean;
+  onClick: (x: string) => void;
+  value: string;
+  icon: IconName;
+  mainLabel: ReactNode;
+  upperLabel?: ReactNode;
+  lowerLabel?: ReactNode;
+  rightIcon?: ReactNode;
+} & FieldProps;
+
 export const AnnotatorTab = ({
   value,
   checked,
   onClick,
   icon,
-  label,
+  upperLabel,
+  mainLabel,
+  lowerLabel,
   rightIcon,
-}: {
-  disabled?: boolean;
-  onClick: (x: string) => void;
-  value: string;
-  icon: IconName;
-  label: ReactNode;
-  rightIcon?: ReactNode;
-} & FieldProps) => {
+}: AnnotatorTabProps) => {
   return (
     <Box
       sx={{
@@ -122,7 +128,9 @@ export const AnnotatorTab = ({
       >
         <ControlTabButtonInner
           iconName={icon}
-          lowerLabel={label}
+          mainLabel={mainLabel}
+          upperLabel={upperLabel}
+          lowerLabel={lowerLabel}
           checked={checked}
           rightIcon={rightIcon}
         />
@@ -166,7 +174,7 @@ export const DraggableTab = ({
         <ControlTabButtonInner
           iconName={iconName ?? getIconName(value)}
           upperLabel={upperLabel}
-          lowerLabel={component.label}
+          mainLabel={component.label}
           checked={checked}
           optional={disabled}
         />
@@ -242,6 +250,7 @@ export const ControlTabButton = ({
 export const ControlTabButtonInner = ({
   iconName,
   upperLabel,
+  mainLabel,
   lowerLabel,
   checked,
   rightIcon,
@@ -251,7 +260,8 @@ export const ControlTabButtonInner = ({
 }: {
   iconName: IconName;
   upperLabel?: string | ReactNode;
-  lowerLabel: string | ReactNode;
+  mainLabel: string | ReactNode;
+  lowerLabel?: string | ReactNode;
   checked?: boolean;
   optional?: boolean;
   // On / Off indicator
@@ -307,8 +317,16 @@ export const ControlTabButtonInner = ({
               textAlign: "left",
             }}
           >
-            {lowerLabel}
+            {mainLabel}
           </Typography>
+          {lowerLabel && (
+            <Typography
+              variant="caption"
+              sx={{ color: "grey.600", lineHeight: ["1rem", "1rem", "1rem"] }}
+            >
+              {lowerLabel}
+            </Typography>
+          )}
         </Flex>
       </Flex>
       {showIsActive && isActive === false ? (

diff --git a/app/configurator/components/field.tsx b/app/configurator/components/field.tsx
@@ -1,9 +1,15 @@
 import { t } from "@lingui/macro";
-import { CircularProgress, Theme } from "@mui/material";
+import { CircularProgress, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { extent, timeFormat, TimeLocaleObject, timeParse } from "d3";
 import get from "lodash/get";
-import { ChangeEvent, ReactNode, useCallback, useMemo, useState } from "react";
+import React, {
+  ChangeEvent,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
 
 import Flex from "@/components/flex";
 import {
@@ -19,6 +25,7 @@ import {
 import { ColorPickerMenu } from "@/configurator/components/chart-controls/color-picker";
 import {
   AnnotatorTab,
+  AnnotatorTabProps,
   ControlTab,
   OnOffControlTab,
 } from "@/configurator/components/chart-controls/control-tab";
@@ -51,7 +58,6 @@ import { FIELD_VALUE_NONE } from "@/configurator/constants";
 import { truthy } from "@/domain/types";
 import { useTimeFormatLocale } from "@/formatters";
 import { DimensionMetadataFragment, TimeUnit } from "@/graphql/query-hooks";
-import { IconName } from "@/icons";
 import SvgIcEdit from "@/icons/components/IcEdit";
 import { useLocale } from "@/locales/use-locale";
 import { getPalette } from "@/palettes";
@@ -447,19 +453,33 @@ export const TimeInput = ({
 
 export const AnnotatorTabField = ({
   value,
+  emptyValueWarning,
   ...tabProps
 }: {
   value: string;
-  disabled?: boolean;
-  icon: IconName;
-  label: ReactNode;
-}) => {
+  emptyValueWarning?: React.ReactNode;
+} & Omit<AnnotatorTabProps, "onClick">) => {
   const fieldProps = useActiveFieldField({
     value,
   });
+
+  const [state] = useConfiguratorState(isConfiguring);
+  const locale = useLocale();
+  const hasText = useMemo(() => {
+    const key = value as "title" | "description";
+    return state.meta[key][locale] !== "";
+  }, [state.meta, value, locale]);
+
   return (
     <AnnotatorTab
       {...tabProps}
+      lowerLabel={
+        hasText ? null : (
+          <Typography variant="caption" color="warning.main">
+            {emptyValueWarning}
+          </Typography>
+        )
+      }
       value={`${fieldProps.value}`}
       checked={fieldProps.checked}
       onClick={fieldProps.onClick}

diff --git a/app/configurator/table/table-chart-configurator.tsx b/app/configurator/table/table-chart-configurator.tsx
@@ -140,13 +140,13 @@ export const ChartConfiguratorTable = ({
               key={"settings"}
               value={"table-settings"}
               icon="settings"
-              label={<Trans id="controls.table.settings">Settings</Trans>}
+              mainLabel={<Trans id="controls.table.settings">Settings</Trans>}
             />
             <AnnotatorTabField
               key={"sorting"}
               value={"table-sorting"}
               icon="sort"
-              label={<Trans id="controls.table.sorting">Sorting</Trans>}
+              mainLabel={<Trans id="controls.table.sorting">Sorting</Trans>}
             />
           </ControlSectionContent>
         </ControlSection>

diff --git a/app/locales/de/messages.po b/app/locales/de/messages.po
@@ -187,6 +187,14 @@ msgstr "Normal"
 msgid "controls..interactiveFilters.time.defaultSettings"
 msgstr "Standardeinstellung"
 
+#: app/configurator/components/chart-annotator.tsx:67
+msgid "controls.annotator.add-description-warning"
+msgstr "Fügen Sie eine Beschreibung hinzu"
+
+#: app/configurator/components/chart-annotator.tsx:57
+msgid "controls.annotator.add-title-warning"
+msgstr "Füge einen Titel hinzu"
+
 #: app/configurator/components/field-i18n.ts:5
 msgid "controls.axis.horizontal"
 msgstr "Horizontale Achse"
@@ -232,7 +240,7 @@ msgstr "Tabelle"
 msgid "controls.color"
 msgstr "Farbe"
 
-#: app/configurator/components/chart-controls/control-tab.tsx:45
+#: app/configurator/components/chart-controls/control-tab.tsx:47
 msgid "controls.color.add"
 msgstr "Hinzufügen …"
 
@@ -455,11 +463,11 @@ msgstr ""
 msgid "controls.none"
 msgstr ""
 
-#: app/configurator/components/chart-controls/control-tab.tsx:312
+#: app/configurator/components/chart-controls/control-tab.tsx:338
 msgid "controls.option.isActive"
 msgstr "Ein"
 
-#: app/configurator/components/chart-controls/control-tab.tsx:308
+#: app/configurator/components/chart-controls/control-tab.tsx:334
 msgid "controls.option.isNotActive"
 msgstr "Aus"
 
@@ -495,7 +503,7 @@ msgstr "Spaltenstil"
 msgid "controls.section.data.filters"
 msgstr "Filter"
 
-#: app/configurator/components/chart-annotator.tsx:52
+#: app/configurator/components/chart-annotator.tsx:50
 msgid "controls.section.description"
 msgstr "Titel & Beschreibung"
 
@@ -549,7 +557,7 @@ msgstr "Tabellensortierung"
 msgid "controls.section.tableoptions"
 msgstr "Tabellenoptionen"
 
-#: app/configurator/components/chart-annotator.tsx:32
+#: app/configurator/components/chart-annotator.tsx:30
 msgid "controls.section.title.warning"
 msgstr "Fügen Sie einen Titel oder eine Beschreibung hinzu"
 

diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po
@@ -207,6 +207,14 @@ msgstr "Regular"
 msgid "controls..interactiveFilters.time.defaultSettings"
 msgstr "Default Settings"
 
+#: app/configurator/components/chart-annotator.tsx:67
+msgid "controls.annotator.add-description-warning"
+msgstr "Please add a description"
+
+#: app/configurator/components/chart-annotator.tsx:57
+msgid "controls.annotator.add-title-warning"
+msgstr "Please add a title"
+
 #: app/configurator/components/field-i18n.ts:5
 msgid "controls.axis.horizontal"
 msgstr "Horizontal Axis"
@@ -252,7 +260,7 @@ msgstr "Table"
 msgid "controls.color"
 msgstr "Color"
 
-#: app/configurator/components/chart-controls/control-tab.tsx:45
+#: app/configurator/components/chart-controls/control-tab.tsx:47
 msgid "controls.color.add"
 msgstr "Add ..."
 
@@ -475,11 +483,11 @@ msgstr "Back to preview"
 msgid "controls.none"
 msgstr "None"
 
-#: app/configurator/components/chart-controls/control-tab.tsx:312
+#: app/configurator/components/chart-controls/control-tab.tsx:338
 msgid "controls.option.isActive"
 msgstr "On"
 
-#: app/configurator/components/chart-controls/control-tab.tsx:308
+#: app/configurator/components/chart-controls/control-tab.tsx:334
 msgid "controls.option.isNotActive"
 msgstr "Off"
 
@@ -511,7 +519,7 @@ msgstr "Column Style"
 msgid "controls.section.data.filters"
 msgstr "Filters"
 
-#: app/configurator/components/chart-annotator.tsx:52
+#: app/configurator/components/chart-annotator.tsx:50
 msgid "controls.section.description"
 msgstr "Title & Description"
 
@@ -565,7 +573,7 @@ msgstr "Table Sorting"
 msgid "controls.section.tableoptions"
 msgstr "Table Options"
 
-#: app/configurator/components/chart-annotator.tsx:32
+#: app/configurator/components/chart-annotator.tsx:30
 msgid "controls.section.title.warning"
 msgstr "Please add a title or description."