Render depends on menu items conditionally in chart settings + fix min max values (#15391)

closes
https://discord.com/channels/1130383047699738754/1430894689317294152

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Raphaël Bosi <71827178+bosiraphael@users.noreply.github.com>

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartSettings.tsx

@@ -14,7 +14,7 @@ import { useUpdateChartSettingToggle } from '@/command-menu/pages/page-layout/ho
 import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
 import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
 import { CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds';
-import { isChartSettingDisabled } from '@/command-menu/pages/page-layout/utils/isChartSettingDisabled';
+import { shouldHideChartSetting } from '@/command-menu/pages/page-layout/utils/shouldHideChartSetting';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
 import { GRAPH_MAXIMUM_NUMBER_OF_GROUPS } from '@/page-layout/widgets/graph/constants/GraphMaximumNumberOfGroups.constant';
@@ -123,13 +123,21 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
 
   const chartSettings = GRAPH_TYPE_INFORMATION[currentGraphType].settings;
 
+  const visibleItemIds = chartSettings.flatMap((group) =>
+    group.items
+      .filter(
+        (item) =>
+          !shouldHideChartSetting(
+            item,
+            widget.objectMetadataId,
+            isGroupByEnabled as boolean,
+          ),
+      )
+      .map((item) => item.id),
+  );
+
   return (
-    <CommandMenuList
-      commandGroups={[]}
-      selectableItemIds={[
-        ...chartSettings.flatMap((group) => group.items.map((item) => item.id)),
-      ]}
-    >
+    <CommandMenuList commandGroups={[]} selectableItemIds={visibleItemIds}>
       <ChartTypeSelectionSection
         currentGraphType={currentGraphType}
         setCurrentGraphType={handleGraphTypeChange}
@@ -139,52 +147,56 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
           message={t`Max ${GRAPH_MAXIMUM_NUMBER_OF_GROUPS} bars per chart. Consider adding a filter`}
         />
       )}
-      {chartSettings.map((group) => (
-        <CommandGroup key={group.heading} heading={group.heading}>
-          {group.items.map((item) => {
-            const isDisabled = isChartSettingDisabled(
+      {chartSettings.map((group) => {
+        const visibleItems = group.items.filter(
+          (item) =>
+            !shouldHideChartSetting(
               item,
               widget.objectMetadataId,
               isGroupByEnabled as boolean,
-            );
+            ),
+        );
 
-            const handleItemToggleChange = () => {
-              setSelectedItemId(item.id);
-              updateChartSettingToggle(item.id);
-            };
+        return (
+          <CommandGroup key={group.heading} heading={group.heading}>
+            {visibleItems.map((item) => {
+              const handleItemToggleChange = () => {
+                setSelectedItemId(item.id);
+                updateChartSettingToggle(item.id);
+              };
 
-            const handleItemInputChange = (value: number | null) => {
-              updateChartSettingInput(item.id, value);
-            };
+              const handleItemInputChange = (value: number | null) => {
+                updateChartSettingInput(item.id, value);
+              };
 
-            const handleItemDropdownOpen = () => {
-              openDropdown({
-                dropdownComponentInstanceIdFromProps: item.id,
-              });
-            };
+              const handleItemDropdownOpen = () => {
+                openDropdown({
+                  dropdownComponentInstanceIdFromProps: item.id,
+                });
+              };
 
-            const handleFilterClick = () => {
-              navigatePageLayoutCommandMenu({
-                commandMenuPage: CommandMenuPages.PageLayoutGraphFilter,
-              });
-            };
+              const handleFilterClick = () => {
+                navigatePageLayoutCommandMenu({
+                  commandMenuPage: CommandMenuPages.PageLayoutGraphFilter,
+                });
+              };
 
-            return (
-              <ChartSettingItem
-                key={item.id}
-                item={item}
-                isDisabled={isDisabled}
-                configuration={configuration}
-                getChartSettingsValues={getChartSettingsValues}
-                onToggleChange={handleItemToggleChange}
-                onInputChange={handleItemInputChange}
-                onDropdownOpen={handleItemDropdownOpen}
-                onFilterClick={handleFilterClick}
-              />
-            );
-          })}
-        </CommandGroup>
-      ))}
+              return (
+                <ChartSettingItem
+                  key={item.id}
+                  item={item}
+                  configuration={configuration}
+                  getChartSettingsValues={getChartSettingsValues}
+                  onToggleChange={handleItemToggleChange}
+                  onInputChange={handleItemInputChange}
+                  onDropdownOpen={handleItemDropdownOpen}
+                  onFilterClick={handleFilterClick}
+                />
+              );
+            })}
+          </CommandGroup>
+        );
+      })}
     </CommandMenuList>
   );
 };

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/chart-settings/ChartSettingItem.tsx

@@ -14,7 +14,6 @@ import { isDefined } from 'twenty-shared/utils';
 
 type ChartSettingItemProps = {
   item: ChartSettingsItem;
-  isDisabled: boolean;
   configuration: ChartConfiguration;
   getChartSettingsValues: (
     itemId: CHART_CONFIGURATION_SETTING_IDS,
@@ -27,7 +26,6 @@ type ChartSettingItemProps = {
 
 export const ChartSettingItem = ({
   item,
-  isDisabled,
   configuration,
   getChartSettingsValues,
   onToggleChange,
@@ -68,7 +66,7 @@ export const ChartSettingItem = ({
               value={stringValue}
               onChange={onInputChange}
               onValidate={(value) =>
-                isDefined(value) &&
+                !isDefined(value) ||
                 isMinMaxRangeValid(
                   item.id as
                     | CHART_CONFIGURATION_SETTING_IDS.MIN_RANGE
@@ -92,7 +90,7 @@ export const ChartSettingItem = ({
       <SelectableListItem
         key={item.id}
         itemId={item.id}
-        onEnter={isDisabled ? undefined : onToggleChange}
+        onEnter={onToggleChange}
       >
         <CommandMenuItemToggle
           LeftIcon={item.Icon}
@@ -106,11 +104,7 @@ export const ChartSettingItem = ({
   }
 
   return (
-    <SelectableListItem
-      key={item.id}
-      itemId={item.id}
-      onEnter={isDisabled ? undefined : onDropdownOpen}
-    >
+    <SelectableListItem key={item.id} itemId={item.id} onEnter={onDropdownOpen}>
       <CommandMenuItemDropdown
         Icon={item.Icon}
         label={t(item.label)}
@@ -125,7 +119,6 @@ export const ChartSettingItem = ({
         description={getChartSettingsValues(item.id) as string}
         contextualTextPosition={'right'}
         hasSubMenu
-        disabled={isDisabled}
       />
     </SelectableListItem>
   );