Widget options always visible, use defaultValue

src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx

@@ -24,6 +24,7 @@ import { useColorTheme } from '../../../../tools/color';
 export type WidgetEditModalInnerProps = {
   widgetId: string;
   options: IWidget<string, any>['properties'];
+  widgetOptions: IWidget<string, any>['properties'];
 };
 
 type IntegrationOptionsValueType = IWidget<string, any>['properties'][string];
@@ -35,7 +36,11 @@ export const WidgetsEditModal = ({
 }: ContextModalProps<WidgetEditModalInnerProps>) => {
   const { t } = useTranslation([`modules/${innerProps.widgetId}`, 'common']);
   const [moduleProperties, setModuleProperties] = useState(innerProps.options);
-  const items = Object.entries(moduleProperties ?? {}) as [string, IntegrationOptionsValueType][];
+  // const items = Object.entries(moduleProperties ?? {}) as [string, IntegrationOptionsValueType][];
+  const items = Object.entries(innerProps.widgetOptions ?? {}) as [
+    string,
+    IntegrationOptionsValueType
+  ][];
 
   // Find the Key in the "Widgets" Object that matches the widgetId
   const currentWidgetDefinition = Widgets[innerProps.widgetId as keyof typeof Widgets];
@@ -79,8 +84,9 @@ export const WidgetsEditModal = ({
 
   return (
     <Stack>
-      {items.map(([key, value], index) => {
+      {items.map(([key, defaultValue], index) => {
         const option = (currentWidgetDefinition as any).options[key] as IWidgetOptionValue;
+        const value = moduleProperties[key] ?? defaultValue;
 
         if (!option) {
           return (
@@ -176,7 +182,6 @@ function WidgetOptionTypeSwitch(
           <Slider
             color={primaryColor}
             key={`${option.type}-${index}`}
-            label={t(`descriptor.settings.${key}.label`)}
             value={value as number}
             min={option.min}
             max={option.max}

src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx

@@ -5,6 +5,7 @@ import { IWidget } from '../../../../widgets/widgets';
 import { GenericTileMenu } from '../GenericTileMenu';
 import { WidgetEditModalInnerProps } from './WidgetsEditModal';
 import { WidgetsRemoveModalInnerProps } from './WidgetsRemoveModal';
+import WidgetsDefinitions from '../../../../widgets';
 
 export type WidgetChangePositionModalInnerProps = {
   widgetId: string;
@@ -20,6 +21,14 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
   const { t } = useTranslation(`modules/${integration}`);
 
   if (!widget) return null;
+  // Match widget.id with WidgetsDefinitions
+  // First get the keys
+  const keys = Object.keys(WidgetsDefinitions);
+  // Then find the key that matches the widget.id
+  const widgetDefinition = keys.find((key) => key === widget.id);
+  // Then get the widget definition
+  const widgetDefinitionObject =
+    WidgetsDefinitions[widgetDefinition as keyof typeof WidgetsDefinitions];
 
   const handleDeleteClick = () => {
     openContextModalGeneric<WidgetsRemoveModalInnerProps>({
@@ -50,6 +59,8 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
       innerProps: {
         widgetId: integration,
         options: widget.properties,
+        // Cast as the right type for the correct widget
+        widgetOptions: widgetDefinitionObject.options as any,
       },
     });
   };