Chart editor - Part 1 (#14820)

This PR is the first part of the creation of the Chart editor.


https://github.com/user-attachments/assets/8b0af8ea-be41-4506-84cb-e40f5521cbf0

Done:
- Bar chart settings (except filters)
- Line chart settings (except filters)

In progress:
- Pie chart settings
- Number chart settings
- Gauge chart settings

Left to do:
- Loosen the backend validation to allow the user to save a partial
configuration, validate the graph configuration in the frontend and
display a error friendly message in the graph if the config is not
completed yet
- Implement the filter edition
- Finish the other graph types settings

packages/twenty-front/src/modules/command-menu/components/CommandMenuItemDropdown.tsx

@@ -0,0 +1,60 @@
+import {
+  CommandMenuItem,
+  type CommandMenuItemProps,
+} from '@/command-menu/components/CommandMenuItem';
+import {
+  Dropdown,
+  type DropdownProps,
+} from '@/ui/layout/dropdown/components/Dropdown';
+import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+
+export type CommandMenuItemDropdownProps = CommandMenuItemProps &
+  Pick<
+    DropdownProps,
+    'dropdownPlacement' | 'dropdownOffset' | 'dropdownId' | 'dropdownComponents'
+  >;
+
+export const CommandMenuItemDropdown = ({
+  id,
+  label,
+  Icon,
+  hotKeys,
+  RightComponent,
+  description,
+  contextualTextPosition,
+  dropdownComponents,
+  dropdownPlacement,
+  dropdownOffset,
+  dropdownId,
+  disabled = false,
+}: CommandMenuItemDropdownProps) => {
+  const isDropdownOpen = useRecoilComponentValue(
+    isDropdownOpenComponentState,
+    dropdownId,
+  );
+
+  return (
+    <Dropdown
+      clickableComponent={
+        <CommandMenuItem
+          id={id}
+          label={label}
+          description={description}
+          contextualTextPosition={contextualTextPosition}
+          Icon={Icon}
+          hotKeys={hotKeys}
+          RightComponent={RightComponent}
+          hasSubMenu
+          isSubMenuOpened={isDropdownOpen}
+          disabled={disabled}
+        />
+      }
+      dropdownComponents={dropdownComponents}
+      dropdownId={dropdownId}
+      dropdownPlacement={dropdownPlacement}
+      dropdownOffset={dropdownOffset}
+      disableClickForClickableComponent={disabled}
+    />
+  );
+};