🐛 Fix edit modal for widgets not working

src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx

@@ -1,5 +1,5 @@
 import { Group, Space, Stack, Text, UnstyledButton } from '@mantine/core';
-import { IconBox, IconPlug, IconTextResize } from '@tabler/icons';
+import { IconBox, IconStack, IconTextResize } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
 import { ReactNode } from 'react';
 import { v4 as uuidv4 } from 'uuid';
@@ -13,7 +13,7 @@ interface AvailableElementTypesProps {
 }
 
 export const AvailableElementTypes = ({
-  onOpenIntegrations,
+  onOpenIntegrations: onOpenWidgets,
   onOpenStaticElements,
 }: AvailableElementTypesProps) => {
   const { t } = useTranslation('layout/element-selector/selector');
@@ -27,8 +27,7 @@ export const AvailableElementTypes = ({
           name="Apps"
           icon={<IconBox size={40} strokeWidth={1.3} />}
           onClick={() => {
-            openContextModalGeneric<{ app: AppType; allowAppNamePropagation: boolean }>(
+            openContextModalGeneric<{ app: AppType; allowAppNamePropagation: boolean }>({
-              {
               modal: 'editApp',
               innerProps: {
                 app: {
@@ -70,14 +69,13 @@ export const AvailableElementTypes = ({
                 allowAppNamePropagation: true,
               },
               size: 'xl',
-              }
+            });
-            );
           }}
         />
         <ElementItem
-          name="Integration"
+          name="Widgets"
-          icon={<IconPlug size={40} strokeWidth={1.3} />}
+          icon={<IconStack size={40} strokeWidth={1.3} />}
-          onClick={onOpenIntegrations}
+          onClick={onOpenWidgets}
         />
         <ElementItem
           name="Static Element"

src/components/Dashboard/Modals/SelectElement/Components/StaticElementsTab/AvailableStaticElementsTab.tsx

@@ -24,6 +24,7 @@ export const AvailableStaticTypes = ({ onClickBack }: AvailableStaticTypesProps)
           name="Static Text"
           description="Display a fixed string on your dashboard"
           image={IconCursorText}
+          handleAddition={/* TODO: add something? */ async () => {}}
         />
       </Grid>
     </>

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

@@ -8,7 +8,7 @@ import { useConfigStore } from '../../../../config/store';
 import { IWidget } from '../../../../widgets/widgets';
 
 export type WidgetEditModalInnerProps = {
-  integration: string;
+  widgetId: string;
   options: IWidget<string, any>['properties'];
 };
 
@@ -19,7 +19,7 @@ export const WidgetsEditModal = ({
   id,
   innerProps,
 }: ContextModalProps<WidgetEditModalInnerProps>) => {
-  const { t } = useTranslation([`modules/${innerProps.integration}`, 'common']);
+  const { t } = useTranslation([`modules/${innerProps.widgetId}`, 'common']);
   const [moduleProperties, setModuleProperties] = useState(innerProps.options);
   const items = Object.entries(moduleProperties ?? {}) as [string, IntegrationOptionsValueType][];
 
@@ -37,7 +37,7 @@ export const WidgetsEditModal = ({
   };
 
   const getMutliselectData = (option: string) => {
-    const currentWidgetDefinition = Widgets[innerProps.integration as keyof typeof Widgets];
+    const currentWidgetDefinition = Widgets[innerProps.widgetId as keyof typeof Widgets];
     if (!Widgets) return [];
 
     const options = currentWidgetDefinition.options as any;
@@ -45,19 +45,15 @@ export const WidgetsEditModal = ({
   };
 
   const handleSave = () => {
-    updateConfig(configName, (prev) => ({
+    updateConfig(configName, (prev) => {
+      let currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
+      currentWidget!.properties = moduleProperties;
+
+      return {
         ...prev,
-      widgets: {
+        widgets: [...prev.widgets.filter((x) => x.id !== innerProps.widgetId), currentWidget!],
-        ...prev.widgets,
+      };
-        [innerProps.integration]:
+    });
-          'properties' in (prev.widgets[innerProps.integration] ?? {})
-            ? {
-                ...prev.widgets[innerProps.integration],
-                properties: moduleProperties,
-              }
-            : prev.widgets[innerProps.integration],
-      },
-    }));
     context.closeModal(id);
   };
 

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

@@ -26,7 +26,7 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
       modal: 'integrationRemove',
       title: <Title order={4}>{t('descriptor.remove.title')}</Title>,
       innerProps: {
-        integration,
+        widgetId: integration,
       },
     });
   };
@@ -48,7 +48,7 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
       modal: 'integrationOptions',
       title: <Title order={4}>{t('descriptor.settings.title')}</Title>,
       innerProps: {
-        integration,
+        widgetId: integration,
         options: widget.properties,
       },
     });