🔒️ Link out of translation files

src/components/Dashboard/Tiles/Widgets/Inputs/LocationSelection.tsx

@@ -32,6 +32,7 @@ type LocationSelectionProps = {
   value: any;
   handleChange: (key: string, value: IntegrationOptionsValueType) => void;
   info?: boolean;
+  infoLink?: string;
 };
 
 export const LocationSelection = ({
@@ -40,6 +41,7 @@ export const LocationSelection = ({
   value,
   handleChange,
   info,
+  infoLink,
 }: LocationSelectionProps) => {
   const { t } = useTranslation('widgets/location');
   const [query, setQuery] = useState(value.name ?? '');
@@ -63,7 +65,7 @@ export const LocationSelection = ({
         <Stack spacing="xs">
           <Flex direction="row" justify="space-between" wrap="nowrap">
             <Title order={5}>{t(`modules/${widgetId}:descriptor.settings.${key}.label`)}</Title>
-            {info && <InfoCard content={t(`modules/${widgetId}:descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard message={t(`modules/${widgetId}:descriptor.settings.${key}.info`)} link={infoLink}/>}
           </Flex>
 
           <Group noWrap align="end">

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

@@ -15,7 +15,7 @@ import {
   Title,
 } from '@mantine/core';
 import { ContextModalProps } from '@mantine/modals';
-import { IconAlertTriangle, IconPlaylistX, IconPlus, IconInfoCircle } from '@tabler/icons-react';
+import { IconAlertTriangle, IconPlaylistX, IconPlus } from '@tabler/icons-react';
 import { Trans, useTranslation } from 'next-i18next';
 import { FC, useState } from 'react';
 
@@ -136,6 +136,7 @@ const WidgetOptionTypeSwitch: FC<{
 }> = ({ option, widgetId, propName: key, value, handleChange }) => {
   const { t } = useTranslation([`modules/${widgetId}`, 'common']);
   const info = option.info ?? false;
+  const link = option.infoLink ?? undefined;
 
   switch (option.type) {
     case 'switch':
@@ -147,7 +148,7 @@ const WidgetOptionTypeSwitch: FC<{
             onChange={(ev) => handleChange(key, ev.currentTarget.checked)}
             {...option.inputProps}
           />
-          {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
+          {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
         </Group>
       );
     case 'text':
@@ -155,7 +156,7 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
           </Group>
           <TextInput
             value={value as string}
@@ -169,7 +170,7 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
           </Group>
           <MultiSelect
             data={option.data}
@@ -186,7 +187,7 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
           </Group>
           <Select
             defaultValue={option.defaultValue}
@@ -203,7 +204,7 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
           </Group>
           <NumberInput
             value={value as number}
@@ -217,7 +218,7 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
           </Group>
           <Slider
             label={value}
@@ -268,7 +269,7 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing="xs">
           <Group align="center" spacing="sm">
             <Text>{t(`descriptor.settings.${key}.label`)}</Text>
-            {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
           </Group>
           <StaticDraggableList
             value={typedVal}
@@ -297,7 +298,7 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
           </Group>
           <MultiSelect
             data={value.map((name: any) => ({ value: name, label: name }))}
@@ -322,7 +323,7 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing="xs">
           <Group align="center" spacing="sm">
             <Text>{t(`descriptor.settings.${key}.label`)}</Text>
-            {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
           </Group>
           <DraggableList
             items={Array.from(value).map((v: any) => ({

src/components/InfoCard/InfoCard.tsx

@@ -9,17 +9,21 @@ import { Link, RichTextEditor, RichTextEditorProps } from '@mantine/tiptap';
 import { IconInfoCircle } from '@tabler/icons-react';
 import { useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
+import { useTranslation } from 'next-i18next';
 
 interface InfoCardProps {
   bg?: SystemProp<DefaultMantineColor>;
   cardProp?: Partial<RichTextEditorProps>;
-  content: string;
+  message: string;
+  link?: string;
   hoverProp?: Partial<HoverCardProps>;
   position?: HoverCardProps['position'];
 }
 
-export const InfoCard = ({ bg, cardProp, content, hoverProp, position }: InfoCardProps) => {
+export const InfoCard = ({ bg, cardProp, message, link, hoverProp, position }: InfoCardProps) => {
   const { colorScheme } = useMantineTheme();
+  const { t } = useTranslation('common');
+  const content = link? message + ` <a href=\"${link}\" target=\"_blank\">${t('seeMore')}</a>` : message;
   const editor = useEditor({
     content,
     editable: false,