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, }, });