✨ Migrate tiles from id to type

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

@@ -25,7 +25,7 @@ import { IWidget } from '../../../../widgets/widgets';
 import { DraggableList } from './DraggableList';
 
 export type WidgetEditModalInnerProps = {
-  widgetId: string;
+  widgetType: string;
   options: IWidget<string, any>['properties'];
   widgetOptions: IWidget<string, any>['properties'];
 };
@@ -37,7 +37,8 @@ export const WidgetsEditModal = ({
   id,
   innerProps,
 }: ContextModalProps<WidgetEditModalInnerProps>) => {
-  const { t } = useTranslation([`modules/${innerProps.widgetId}`, 'common']);
+  console.log('?');
+  const { t } = useTranslation([`modules/${innerProps.widgetType}`, 'common']);
   const [moduleProperties, setModuleProperties] = useState(innerProps.options);
   const items = Object.entries(innerProps.widgetOptions ?? {}) as [
     string,
@@ -45,7 +46,7 @@ export const WidgetsEditModal = ({
   ][];
 
   // Find the Key in the "Widgets" Object that matches the widgetId
-  const currentWidgetDefinition = Widgets[innerProps.widgetId as keyof typeof Widgets];
+  const currentWidgetDefinition = Widgets[innerProps.widgetType as keyof typeof Widgets];
   const { name: configName } = useConfigContext();
   const updateConfig = useConfigStore((x) => x.updateConfig);
 
@@ -63,12 +64,15 @@ export const WidgetsEditModal = ({
     updateConfig(
       configName,
       (prev) => {
-        const currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
+        const currentWidget = prev.widgets.find((x) => x.type === innerProps.widgetType);
         currentWidget!.properties = moduleProperties;
 
         return {
           ...prev,
-          widgets: [...prev.widgets.filter((x) => x.id !== innerProps.widgetId), currentWidget!],
+          widgets: [
+            ...prev.widgets.filter((x) => x.type !== innerProps.widgetType),
+            currentWidget!,
+          ],
         };
       },
       true
@@ -76,6 +80,8 @@ export const WidgetsEditModal = ({
     context.closeModal(id);
   };
 
+  console.log('??');
+
   return (
     <Stack>
       {items.map(([key, _], index) => {
@@ -100,7 +106,7 @@ export const WidgetsEditModal = ({
           <WidgetOptionTypeSwitch
             key={`${key}.${index}`}
             option={option}
-            widgetId={innerProps.widgetId}
+            widgetId={innerProps.widgetType}
             propName={key}
             value={value}
             handleChange={handleChange}

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

@@ -9,7 +9,7 @@ import { WidgetEditModalInnerProps } from './WidgetsEditModal';
 import { WidgetsRemoveModalInnerProps } from './WidgetsRemoveModal';
 
 export type WidgetChangePositionModalInnerProps = {
-  widgetId: string;
+  widgetType: string;
   widget: IWidget<string, any>;
   wrapperColumnCount: number;
 };
@@ -27,8 +27,8 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
   // Match widget.id with WidgetsDefinitions
   // First get the keys
   const keys = Object.keys(WidgetsDefinitions);
-  // Then find the key that matches the widget.id
-  const widgetDefinition = keys.find((key) => key === widget.id);
+  // Then find the key that matches the widget.type
+  const widgetDefinition = keys.find((key) => key === widget.type);
   // Then get the widget definition
   const widgetDefinitionObject =
     WidgetsDefinitions[widgetDefinition as keyof typeof WidgetsDefinitions];
@@ -38,7 +38,7 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
       modal: 'integrationRemove',
       title: <Title order={4}>{t('common:remove')}</Title>,
       innerProps: {
-        widgetId: integration,
+        widgetType: integration,
       },
       styles: {
         inner: {
@@ -55,37 +55,24 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
       size: 'xl',
       title: null,
       innerProps: {
-        widgetId: integration,
+        widgetType: integration,
         widget,
         wrapperColumnCount,
       },
-      styles: {
-        inner: {
-          position: 'sticky',
-          top: 30,
-        },
-      },
     });
   };
 
   const handleEditClick = () => {
     openContextModalGeneric<WidgetEditModalInnerProps>({
       modal: 'integrationOptions',
-      title: <Title order={4}>{t('descriptor.settings.title')}</Title>,
+      title: t('descriptor.settings.title'),
       innerProps: {
-        widgetId: integration,
+        widgetType: integration,
         options: widget.properties,
         // Cast as the right type for the correct widget
         widgetOptions: widgetDefinitionObject.options as any,
       },
       zIndex: 5,
-      styles: {
-        inner: {
-          position: 'sticky',
-          top: 30,
-          maxHeight: '100%',
-        },
-      },
     });
   };
 

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

@@ -6,7 +6,7 @@ import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 
 export type WidgetsRemoveModalInnerProps = {
-  widgetId: string;
+  widgetType: string;
 };
 
 export const WidgetsRemoveModal = ({
@@ -14,7 +14,7 @@ export const WidgetsRemoveModal = ({
   id,
   innerProps,
 }: ContextModalProps<WidgetsRemoveModalInnerProps>) => {
-  const { t } = useTranslation([`modules/${innerProps.widgetId}`, 'common']);
+  const { t } = useTranslation([`modules/${innerProps.widgetType}`, 'common']);
   const { name: configName } = useConfigContext();
   if (!configName) return null;
   const updateConfig = useConfigStore((x) => x.updateConfig);
@@ -23,7 +23,7 @@ export const WidgetsRemoveModal = ({
       configName,
       (prev) => ({
         ...prev,
-        widgets: prev.widgets.filter((w) => w.id !== innerProps.widgetId),
+        widgets: prev.widgets.filter((w) => w.type !== innerProps.widgetType),
       }),
       true
     );
@@ -35,7 +35,7 @@ export const WidgetsRemoveModal = ({
       <Trans
         i18nKey="common:removeConfirm"
         components={[<Text weight={500} />]}
-        values={{ item: innerProps.widgetId }}
+        values={{ item: innerProps.widgetType }}
       />
       <Group position="right">
         <Button onClick={() => context.closeModal(id)} variant="light">