✨ Migrate tiles from id to type

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

@@ -28,7 +28,7 @@ export const ChangeWidgetPositionModal = ({
     updateConfig(
       configName,
       (prev) => {
-        const currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
+        const currentWidget = prev.widgets.find((x) => x.type === innerProps.widgetType);
         currentWidget!.shape[shapeSize] = {
           location: {
             x,
@@ -42,7 +42,10 @@ export const ChangeWidgetPositionModal = ({
 
         return {
           ...prev,
-          widgets: [...prev.widgets.filter((x) => x.id !== innerProps.widgetId), currentWidget!],
+          widgets: [
+            ...prev.widgets.filter((x) => x.type !== innerProps.widgetType),
+            currentWidget!,
+          ],
         };
       },
       true
@@ -54,8 +57,8 @@ export const ChangeWidgetPositionModal = ({
     closeModal(id);
   };
 
-  const widthData = useWidthData(innerProps.widgetId);
-  const heightData = useHeightData(innerProps.widgetId);
+  const widthData = useWidthData(innerProps.widgetType);
+  const heightData = useHeightData(innerProps.widgetType);
 
   return (
     <ChangePositionModal

src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/AvailableWidgetsTab.tsx

@@ -1,6 +1,5 @@
 import { Grid, Text } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
-import { useConfigContext } from '../../../../../../config/provider';
 import widgets from '../../../../../../widgets';
 import { SelectorBackArrow } from '../Shared/SelectorBackArrow';
 import { WidgetElementType } from './WidgetElementType';
@@ -13,7 +12,6 @@ export const AvailableIntegrationElements = ({
   onClickBack,
 }: AvailableIntegrationElementsProps) => {
   const { t } = useTranslation('layout/element-selector/selector');
-  const activeWidgets = useConfigContext().config?.widgets ?? [];
   return (
     <>
       <SelectorBackArrow onClickBack={onClickBack} />
@@ -23,11 +21,9 @@ export const AvailableIntegrationElements = ({
       </Text>
 
       <Grid>
-        {Object.entries(widgets)
-          .filter(([widgetId]) => !activeWidgets.some((aw) => aw.id === widgetId))
-          .map(([k, v]) => (
-            <WidgetElementType key={k} id={k} image={v.icon} widget={v} />
-          ))}
+        {Object.entries(widgets).map(([k, v]) => (
+          <WidgetElementType key={k} id={k} image={v.icon} widget={v} />
+        ))}
       </Grid>
     </>
   );

src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx

@@ -2,6 +2,7 @@ import { useModals } from '@mantine/modals';
 import { showNotification } from '@mantine/notifications';
 import { IconChecks, TablerIcon } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
+import { v4 as uuidv4 } from 'uuid';
 import { useConfigContext } from '../../../../../../config/provider';
 import { useConfigStore } from '../../../../../../config/store';
 import { IWidget, IWidgetDefinition } from '../../../../../../widgets/widgets';
@@ -32,9 +33,10 @@ export const WidgetElementType = ({ id, image, disabled, widget }: WidgetElement
       (prev) => ({
         ...prev,
         widgets: [
-          ...prev.widgets.filter((w) => w.id !== widget.id),
+          ...prev.widgets,
           {
-            id: widget.id,
+            id: uuidv4(),
+            type: widget.id,
             properties: Object.entries(widget.options).reduce((prev, [k, v]) => {
               const newPrev = prev;
               newPrev[k] = v.defaultValue;

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">