✨ Migrated widget modals from integration modals

public/locales/en/modules/dashdot.json

@@ -3,7 +3,7 @@
     "name": "Dash.",
     "description": "A module for displaying the graphs of your running Dash. instance.",
     "settings": {
-      "title": "Settings for Dash. integration",
+      "title": "Settings for Dash. widget",
       "cpuMultiView": {
         "label": "CPU Multi-Core View"
       },
@@ -21,8 +21,8 @@
       }
     },
     "remove": {
-      "title": "Remove Dash. integration",
+      "title": "Remove Dash. widget",
-      "confirm": "Are you sure, that you want to remove the Dash. integration?"
+      "confirm": "Are you sure, that you want to remove the Dash. widget?"
     }
   },
   "card": {
@@ -55,4 +55,4 @@
       }
     }
   }
-}
+}

src/components/Dashboard/Modals/ChangePosition/ChangeIntegrationPositionModal.tsx

@@ -2,10 +2,10 @@ import { SelectItem } from '@mantine/core';
 import { closeModal, ContextModalProps } from '@mantine/modals';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
-import { IntegrationsType } from '../../../../types/integration';
 import { WidgetChangePositionModalInnerProps } from '../../Tiles/Widgets/WidgetsMenu';
 import { Tiles } from '../../Tiles/tilesDefinitions';
 import { ChangePositionModal } from './ChangePositionModal';
+import widgets from '../../../../widgets';
 
 export const ChangeIntegrationPositionModal = ({
   context,
@@ -63,20 +63,22 @@ export const ChangeIntegrationPositionModal = ({
   );
 };
 
-const useWidthData = (integration: keyof IntegrationsType): SelectItem[] => {
+const useWidthData = (integration: string): SelectItem[] => {
-  const tileDefinitions = Tiles[integration];
+  const currentWidget = widgets[integration as keyof typeof widgets];
-  const offset = tileDefinitions.minWidth ?? 2;
+  if (!currentWidget) return [];
-  const length = (tileDefinitions.maxWidth ?? 12) - offset;
+  const offset = currentWidget.gridstack.minWidth ?? 2;
+  const length = (currentWidget.gridstack.maxWidth ?? 12) - offset;
   return Array.from({ length }, (_, i) => i + offset).map((n) => ({
     value: n.toString(),
     label: `${64 * n}px`,
   }));
 };
 
-const useHeightData = (integration: keyof IntegrationsType): SelectItem[] => {
+const useHeightData = (integration: string): SelectItem[] => {
-  const tileDefinitions = Tiles[integration];
+  const currentWidget = widgets[integration as keyof typeof widgets];
-  const offset = tileDefinitions.minHeight ?? 2;
+  if (!currentWidget) return [];
-  const length = (tileDefinitions.maxHeight ?? 12) - offset;
+  const offset = currentWidget.gridstack.minHeight ?? 2;
+  const length = (currentWidget.gridstack.maxHeight ?? 12) - offset;
   return Array.from({ length }, (_, i) => i + offset).map((n) => ({
     value: n.toString(),
     label: `${64 * n}px`,

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

@@ -1,31 +1,27 @@
+import Widgets from '../../../../widgets';
 import { Button, Group, MultiSelect, Stack, Switch, TextInput } from '@mantine/core';
 import { ContextModalProps } from '@mantine/modals';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
-import { DashDotGraphType, IntegrationsType } from '../../../../types/integration';
+import { IWidget } from '../../../../widgets/widgets';
 
-export type WidgetEditModalInnerProps<
+export type WidgetEditModalInnerProps = {
-  TIntegrationKey extends keyof IntegrationsType = keyof IntegrationsType
+  integration: string;
-> = {
+  options: IWidget<string, any>['properties'];
-  integration: TIntegrationKey;
-  options: IntegrationOptions<TIntegrationKey> | undefined;
-  labels: IntegrationOptionLabels<IntegrationOptions<TIntegrationKey>>;
 };
 
+type IntegrationOptionsValueType = IWidget<string, any>['properties'][string];
+
 export const WidgetsEditModal = ({
   context,
   id,
   innerProps,
 }: ContextModalProps<WidgetEditModalInnerProps>) => {
-  const translationKey = integrationModuleTranslationsMap.get(innerProps.integration);
+  const { t } = useTranslation([`modules/${innerProps.integration}`, 'common']);
-  const { t } = useTranslation([translationKey ?? '', 'common']);
   const [moduleProperties, setModuleProperties] = useState(innerProps.options);
-  const items = Object.entries(moduleProperties ?? {}) as [
+  const items = Object.entries(moduleProperties ?? {}) as [string, IntegrationOptionsValueType][];
-    keyof typeof innerProps.options,
-    IntegrationOptionsValueType
-  ][];
 
   const { name: configName } = useConfigContext();
   const updateConfig = useConfigStore((x) => x.updateConfig);
@@ -40,6 +36,14 @@ export const WidgetsEditModal = ({
     });
   };
 
+  const getMutliselectData = (option: string) => {
+    const currentWidgetDefinition = Widgets[innerProps.integration as keyof typeof Widgets];
+    if (!Widgets) return [];
+
+    const options = currentWidgetDefinition.options as any;
+    return options[option]?.data ?? [];
+  };
+
   const handleSave = () => {
     updateConfig(configName, (prev) => ({
       ...prev,
@@ -63,23 +67,24 @@ export const WidgetsEditModal = ({
         <>
           {typeof value === 'boolean' ? (
             <Switch
-              label={t(innerProps.labels[key as keyof typeof innerProps.labels])}
+              label={t(`descriptor.settings.${key}.label`)}
               checked={value}
               onChange={(ev) => handleChange(key, ev.currentTarget.checked)}
             />
           ) : null}
           {typeof value === 'string' ? (
             <TextInput
-              label={t(innerProps.labels[key])}
+              label={t(`descriptor.settings.${key}.label`)}
               value={value}
               onChange={(ev) => handleChange(key, ev.currentTarget.value)}
             />
           ) : null}
           {typeof value === 'object' && Array.isArray(value) ? (
             <MultiSelect
-              data={['cpu', 'gpu', 'ram', 'storage', 'network']}
+              data={getMutliselectData(key)}
+              label={t(`descriptor.settings.${key}.label`)}
               value={value}
-              onChange={(v) => handleChange(key, v as DashDotGraphType[])}
+              onChange={(v) => handleChange(key, v)}
             />
           ) : null}
         </>
@@ -94,29 +99,3 @@ export const WidgetsEditModal = ({
     </Stack>
   );
 };
-
-type PropertiesOf<
-  TKey extends keyof IntegrationsType,
-  T extends IntegrationsType[TKey]
-> = T extends { properties: unknown } ? T['properties'] : {};
-
-export type IntegrationOptions<TKey extends keyof IntegrationsType> = PropertiesOf<
-  TKey,
-  IntegrationsType[TKey]
->;
-
-export type IntegrationOptionLabels<TIntegrationOptions> = {
-  [key in keyof TIntegrationOptions]: string;
-};
-
-type IntegrationOptionsValueType = boolean | string | DashDotGraphType[];
-
-export const integrationModuleTranslationsMap = new Map<keyof IntegrationsType, string>([
-  ['calendar', 'modules/calendar'],
-  ['clock', 'modules/date'],
-  ['weather', 'modules/weather'],
-  ['dashDot', 'modules/dashdot'],
-  ['bitTorrent', 'modules/torrents-status'],
-  ['useNet', 'modules/usenet'],
-  ['torrentNetworkTraffic', 'modules/dlspeed'],
-]);

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

@@ -1,36 +1,23 @@
 import { Title } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import { openContextModalGeneric } from '../../../../tools/mantineModalManagerExtensions';
-import { IntegrationsType } from '../../../../types/integration';
+import { IWidget } from '../../../../widgets/widgets';
-import { TileBaseType } from '../../../../types/tile';
 import { GenericTileMenu } from '../GenericTileMenu';
+import { WidgetEditModalInnerProps } from './WidgetsEditModal';
 import { WidgetsRemoveModalInnerProps } from './WidgetsRemoveModal';
-import {
-  WidgetEditModalInnerProps,
-  integrationModuleTranslationsMap,
-  IntegrationOptionLabels,
-  IntegrationOptions,
-} from './WidgetsEditModal';
 
 export type WidgetChangePositionModalInnerProps = {
-  integration: keyof IntegrationsType;
+  integration: string;
-  module: TileBaseType;
+  module: IWidget<string, any>;
 };
 
-interface WidgetsMenuProps<TIntegrationKey extends keyof IntegrationsType> {
+interface WidgetsMenuProps {
-  integration: TIntegrationKey;
+  integration: string;
-  module: TileBaseType | undefined;
+  module: IWidget<string, any> | undefined;
-  options: IntegrationOptions<TIntegrationKey> | undefined;
-  labels: IntegrationOptionLabels<IntegrationOptions<TIntegrationKey>>;
 }
 
-export const WidgetsMenu = <TIntegrationKey extends keyof IntegrationsType>({
+export const WidgetsMenu = ({ integration, module }: WidgetsMenuProps) => {
-  integration,
+  const { t } = useTranslation(`modules/${integration}`);
-  options,
-  labels,
-  module,
-}: WidgetsMenuProps<TIntegrationKey>) => {
-  const { t } = useTranslation(integrationModuleTranslationsMap.get(integration));
 
   if (!module) return null;
 
@@ -57,13 +44,12 @@ export const WidgetsMenu = <TIntegrationKey extends keyof IntegrationsType>({
   };
 
   const handleEditClick = () => {
-    openContextModalGeneric<WidgetEditModalInnerProps<TIntegrationKey>>({
+    openContextModalGeneric<WidgetEditModalInnerProps>({
       modal: 'integrationOptions',
       title: <Title order={4}>{t('descriptor.settings.title')}</Title>,
       innerProps: {
         integration,
-        options,
+        options: module.properties,
-        labels,
       },
     });
   };
@@ -73,7 +59,7 @@ export const WidgetsMenu = <TIntegrationKey extends keyof IntegrationsType>({
       handleClickEdit={handleEditClick}
       handleClickChangePosition={handleChangeSizeClick}
       handleClickDelete={handleDeleteClick}
-      displayEdit={options !== undefined}
+      displayEdit={module.properties !== undefined}
     />
   );
 };

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

@@ -2,11 +2,9 @@ import React from 'react';
 import { Button, Group, Stack, Text } from '@mantine/core';
 import { ContextModalProps } from '@mantine/modals';
 import { useTranslation } from 'next-i18next';
-import { IntegrationsType } from '../../../../types/integration';
-import { integrationModuleTranslationsMap } from './WidgetsEditModal';
 
 export type WidgetsRemoveModalInnerProps = {
-  integration: keyof IntegrationsType;
+  integration: string;
 };
 
 export const WidgetsRemoveModal = ({
@@ -14,8 +12,7 @@ export const WidgetsRemoveModal = ({
   id,
   innerProps,
 }: ContextModalProps<WidgetsRemoveModalInnerProps>) => {
-  const translationKey = integrationModuleTranslationsMap.get(innerProps.integration);
+  const { t } = useTranslation([`modules/${innerProps.integration}`, 'common']);
-  const { t } = useTranslation([translationKey ?? '', 'common']);
   const handleDeletion = () => {
     // TODO: remove tile
     context.closeModal(id);

src/components/Dashboard/Tiles/tilesDefinitions.tsx

@@ -1,5 +1,5 @@
 import calendarDefinition from '../../../widgets/calendar/CalendarTile';
-import clockDefinition from '../../../widgets/clock/ClockTile';
+import clockDefinition from '../../../widgets/date/DateTile';
 import dashDotDefinition from '../../../widgets/dashDot/DashDotTile';
 import useNetDefinition from '../../../widgets/useNet/UseNetTile';
 import weatherDefinition from '../../../widgets/weather/WeatherTile';

src/pages/api/modules/dashdot/info.ts

@@ -13,7 +13,7 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
 
   const config = getConfig(configName);
 
-  const dashDotUrl = config.integrations.dashDot?.properties.url;
+  const dashDotUrl = config.integrations.dashdot?.properties.url;
 
   if (!dashDotUrl) {
     return res.status(400).json({

src/pages/api/modules/dashdot/storage.ts

@@ -13,7 +13,7 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
 
   const config = getConfig(configName);
 
-  const dashDotUrl = config.integrations.dashDot?.properties.url;
+  const dashDotUrl = config.integrations.dashdot?.properties.url;
 
   if (!dashDotUrl) {
     return res.status(400).json({

src/widgets/bitTorrent/BitTorrentTile.tsx

@@ -5,7 +5,7 @@ import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 
 const definition = defineWidget({
-  id: 'bitTorrent',
+  id: 'torrents-status',
   icon: IconClock,
   options: {},
   gridstack: {

src/widgets/dashDot/DashDotTile.tsx

@@ -13,7 +13,7 @@ import { DashDotCompactStorage } from './DashDotCompactStorage';
 import { DashDotGraph } from './DashDotGraph';
 
 const definition = defineWidget({
-  id: 'dashDot',
+  id: 'dashdot',
   icon: 'https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/dashdot.png',
   options: {
     cpuMultiView: {
@@ -78,18 +78,7 @@ function DashDotTile({ module, className }: DashDotTileProps) {
 
   const menu = (
     // TODO: add widgetWrapper that is generic and uses the definition
-    <WidgetsMenu<'dashDot'>
+    <WidgetsMenu module={module} integration={definition.id} />
-      module={module}
-      integration="dashDot"
-      options={module?.properties}
-      labels={{
-        isCpuMultiView: 'descriptor.settings.cpuMultiView.label',
-        isStorageMultiView: 'descriptor.settings.storageMultiView.label',
-        isCompactView: 'descriptor.settings.useCompactView.label',
-        graphs: 'descriptor.settings.graphs.label',
-        url: 'descriptor.settings.url.label',
-      }}
-    />
   );
 
   if (!dashDotUrl) {

src/widgets/date/DateTile.tsx

@@ -10,7 +10,7 @@ import { IWidget } from '../widgets';
 import { IconClock } from '@tabler/icons';
 
 const definition = defineWidget({
-  id: 'clock',
+  id: 'date',
   icon: IconClock,
   options: {
     display24HourFormat: {
@@ -18,35 +18,29 @@ const definition = defineWidget({
       defaultValue: false,
     },
   },
-
   gridstack: {
     minWidth: 4,
     minHeight: 2,
     maxWidth: 12,
     maxHeight: 12,
   },
-  component: ClockTile,
+  component: DateTile,
 });
 
-export type IClockWidget = IWidget<typeof definition['id'], typeof definition>;
+export type IDateWidget = IWidget<typeof definition['id'], typeof definition>;
 
-interface ClockTileProps extends BaseTileProps {
+interface DateTileProps extends BaseTileProps {
-  module: IClockWidget; // TODO: change to new type defined through widgetDefinition
+  module: IDateWidget; // TODO: change to new type defined through widgetDefinition
 }
 
-function ClockTile({ className, module }: ClockTileProps) {
+function DateTile({ className, module }: DateTileProps) {
   const date = useDateState();
   const formatString = module.properties.display24HourFormat ? 'HH:mm' : 'h:mm A';
 
   // TODO: add widgetWrapper that is generic and uses the definition
   return (
     <HomarrCardWrapper className={className}>
-      <WidgetsMenu<'clock'>
+      <WidgetsMenu integration={definition.id} module={module} />
-        integration="clock"
-        module={module}
-        options={module.properties}
-        labels={{ is24HoursFormat: 'descriptor.settings.display24HourFormat.label' }}
-      />
       <Center style={{ height: '100%' }}>
         <Stack spacing="xs">
           <Title>{dayjs(date).format(formatString)}</Title>

src/widgets/index.ts

@@ -1,8 +1,16 @@
+import date from './date/DateTile';
 import calendar from './calendar/CalendarTile';
-import dashDot from './dashDot/DashDotTile';
+import dashdot from './dashDot/DashDotTile';
-import useNet from './useNet/UseNetTile';
+import usenet from './useNet/UseNetTile';
-import clock from './clock/ClockTile';
 import weather from './weather/WeatherTile';
 import bitTorrent from './bitTorrent/BitTorrentTile';
 import torrentNetworkTraffic from './torrentNetworkTraffic/TorrentNetworkTrafficTile';
-export default { calendar, dashDot, useNet, clock, weather, bitTorrent, torrentNetworkTraffic };
+export default {
+  calendar,
+  dashdot,
+  usenet,
+  weather,
+  'torrents-status': bitTorrent,
+  dlspeed: torrentNetworkTraffic,
+  date,
+};

src/widgets/torrentNetworkTraffic/TorrentNetworkTrafficTile.tsx

@@ -5,7 +5,7 @@ import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 
 const definition = defineWidget({
-  id: 'torrentNetworkTraffic',
+  id: 'dlspeed',
   icon: IconClock,
   options: {},
 

src/widgets/useNet/UseNetTile.tsx

@@ -32,7 +32,7 @@ dayjs.extend(duration);
 const downloadServiceTypes: ServiceIntegrationType['type'][] = ['sabnzbd', 'nzbGet'];
 
 const definition = defineWidget({
-  id: 'useNet',
+  id: 'usenet',
   icon: IconFileDownload,
   options: {},
   component: UseNetTile,

src/widgets/weather/WeatherTile.tsx

@@ -67,15 +67,7 @@ function WeatherTile({ className, module }: WeatherTileProps) {
   // TODO: add widgetWrapper that is generic and uses the definition
   return (
     <HomarrCardWrapper className={className}>
-      <WidgetsMenu
+      <WidgetsMenu integration={definition.id} module={module} />
-        integration="weather"
-        module={module}
-        options={module.properties}
-        labels={{
-          isFahrenheit: 'descriptor.settings.displayInFahrenheit.label',
-          location: 'descriptor.settings.location.label',
-        }}
-      />
       <Center style={{ height: '100%' }}>
         <Group spacing="md" noWrap align="center">
           <WeatherIcon code={weather!.current_weather.weathercode} />