🐛 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,57 +27,55 @@ export const AvailableElementTypes = ({
           name="Apps"
           icon={<IconBox size={40} strokeWidth={1.3} />}
           onClick={() => {
-            openContextModalGeneric<{ app: AppType; allowAppNamePropagation: boolean }>(
-              {
-                modal: 'editApp',
-                innerProps: {
-                  app: {
-                    id: uuidv4(),
-                    name: 'Your app',
-                    url: 'https://homarr.dev',
-                    appearance: {
-                      iconUrl: '/imgs/logo/logo.png',
-                    },
-                    network: {
-                      enabledStatusChecker: false,
-                      okStatus: [],
-                    },
-                    behaviour: {
-                      isOpeningNewTab: true,
-                      onClickUrl: '',
-                    },
-                    area: {
-                      type: 'sidebar',
-                      properties: {
-                        location: 'right',
-                      },
-                    },
-                    shape: {
-                      location: {
-                        x: 0,
-                        y: 0,
-                      },
-                      size: {
-                        height: 1,
-                        width: 1,
-                      },
-                    },
-                    integration: {
-                      type: null,
-                      properties: [],
+            openContextModalGeneric<{ app: AppType; allowAppNamePropagation: boolean }>({
+              modal: 'editApp',
+              innerProps: {
+                app: {
+                  id: uuidv4(),
+                  name: 'Your app',
+                  url: 'https://homarr.dev',
+                  appearance: {
+                    iconUrl: '/imgs/logo/logo.png',
+                  },
+                  network: {
+                    enabledStatusChecker: false,
+                    okStatus: [],
+                  },
+                  behaviour: {
+                    isOpeningNewTab: true,
+                    onClickUrl: '',
+                  },
+                  area: {
+                    type: 'sidebar',
+                    properties: {
+                      location: 'right',
                     },
                   },
-                  allowAppNamePropagation: true,
+                  shape: {
+                    location: {
+                      x: 0,
+                      y: 0,
+                    },
+                    size: {
+                      height: 1,
+                      width: 1,
+                    },
+                  },
+                  integration: {
+                    type: null,
+                    properties: [],
+                  },
                 },
-                size: 'xl',
-              }
-            );
+                allowAppNamePropagation: true,
+              },
+              size: 'xl',
+            });
           }}
         />
         <ElementItem
-          name="Integration"
-          icon={<IconPlug size={40} strokeWidth={1.3} />}
-          onClick={onOpenIntegrations}
+          name="Widgets"
+          icon={<IconStack size={40} strokeWidth={1.3} />}
+          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) => ({
-      ...prev,
-      widgets: {
-        ...prev.widgets,
-        [innerProps.integration]:
-          'properties' in (prev.widgets[innerProps.integration] ?? {})
-            ? {
-                ...prev.widgets[innerProps.integration],
-                properties: moduleProperties,
-              }
-            : prev.widgets[innerProps.integration],
-      },
-    }));
+    updateConfig(configName, (prev) => {
+      let currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
+      currentWidget!.properties = moduleProperties;
+
+      return {
+        ...prev,
+        widgets: [...prev.widgets.filter((x) => x.id !== innerProps.widgetId), currentWidget!],
+      };
+    });
     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,
       },
     });