diff --git a/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx b/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx
index a95e257d8..96fe756a0 100644
--- a/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx
+++ b/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={}
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',
+ });
}}
/>
}
- onClick={onOpenIntegrations}
+ name="Widgets"
+ icon={}
+ onClick={onOpenWidgets}
/>
{}}
/>
>
diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
index 23e3ecdaf..62328e31b 100644
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
+++ b/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['properties'];
};
@@ -19,7 +19,7 @@ export const WidgetsEditModal = ({
id,
innerProps,
}: ContextModalProps) => {
- 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);
};
diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx
index cf696d318..75825f418 100644
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx
@@ -26,7 +26,7 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
modal: 'integrationRemove',
title: {t('descriptor.remove.title')},
innerProps: {
- integration,
+ widgetId: integration,
},
});
};
@@ -48,7 +48,7 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
modal: 'integrationOptions',
title: {t('descriptor.settings.title')},
innerProps: {
- integration,
+ widgetId: integration,
options: widget.properties,
},
});