Regression: Broken components on Federation and Engagement dashboards (#25653)

* Fix odd typechecking issues with JSON modules

* Avoid `data` as directory for modules

* rename other `data` folder

Co-authored-by: gabriellsh <gabriel.henriques@rocket.chat>

apps/meteor/client/views/admin/federationDashboard/OverviewSection.tsx

@@ -2,7 +2,7 @@ import { Box, Skeleton } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement, useMemo } from 'react';
 
-import CounterSet from '../../../components/data/CounterSet';
+import CounterSet from '../../../components/dataView/CounterSet';
 import { AsyncStatePhase } from '../../../hooks/useAsyncState';
 import { usePolledMethodData } from '../../../hooks/usePolledMethodData';
 

apps/meteor/ee/client/views/admin/engagementDashboard/channels/ChannelsTab.tsx

@@ -3,11 +3,11 @@ import { useTranslation } from '@rocket.chat/ui-contexts';
 import moment from 'moment';
 import React, { ReactElement, useMemo, useState } from 'react';
 
-import Growth from '../../../../../../client/components/data/Growth';
+import Growth from '../../../../../../client/components/dataView/Growth';
 import Section from '../Section';
-import DownloadDataButton from '../data/DownloadDataButton';
-import PeriodSelector from '../data/PeriodSelector';
-import { usePeriodSelectorState } from '../data/usePeriodSelectorState';
+import DownloadDataButton from '../dataView/DownloadDataButton';
+import PeriodSelector from '../dataView/PeriodSelector';
+import { usePeriodSelectorState } from '../dataView/usePeriodSelectorState';
 import { useChannelsList } from './useChannelsList';
 
 const ChannelsTab = (): ReactElement => {

apps/meteor/ee/client/views/admin/engagementDashboard/channels/useChannelsList.ts

@@ -1,7 +1,7 @@
 import { useQuery } from 'react-query';
 
 import { getFromRestApi } from '../../../../lib/getFromRestApi';
-import { getPeriodRange, Period } from '../data/periods';
+import { getPeriodRange, Period } from '../dataView/periods';
 
 type UseChannelsListOptions = {
 	period: Period['key'];

apps/meteor/ee/client/views/admin/engagementDashboard/dataView/DownloadDataButton.tsx

@@ -1,8 +1,7 @@
 import { Box, ActionButton } from '@rocket.chat/fuselage';
+import { useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ComponentProps, ReactElement } from 'react';
 
-import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
-import { useTranslation } from '@rocket.chat/ui-contexts'
 import { downloadCsvAs } from '../../../../../../client/lib/download';
 
 type RowFor<THeaders extends readonly string[]> = readonly unknown[] & {

apps/meteor/ee/client/views/admin/engagementDashboard/dataView/PeriodSelector.tsx

@@ -1,7 +1,7 @@
 import { Select } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement, useMemo } from 'react';
 
-import { useTranslation } from '@rocket.chat/ui-contexts'
 import { getPeriod, Period } from './periods';
 
 type PeriodSelectorProps<TPeriod extends Period['key']> = {

apps/meteor/ee/client/views/admin/engagementDashboard/dataView/periods.ts

@@ -1,7 +1,6 @@
+import { TranslationKey } from '@rocket.chat/ui-contexts';
 import moment from 'moment';
 
-import { TranslationKey } from '@rocket.chat/ui-contexts'
-
 const label = (
 	translationKey: TranslationKey,
 	...replacements: unknown[]

apps/meteor/ee/client/views/admin/engagementDashboard/dataView/usePeriodLabel.ts

@@ -1,6 +1,6 @@
+import { useTranslation } from '@rocket.chat/ui-contexts';
 import { useMemo } from 'react';
 
-import { useTranslation } from '@rocket.chat/ui-contexts'
 import { getPeriod, Period } from './periods';
 
 export const usePeriodLabel = (period: Period['key']): string => {

apps/meteor/ee/client/views/admin/engagementDashboard/messages/MessagesPerChannelSection.tsx

@@ -5,10 +5,10 @@ import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement, useMemo } from 'react';
 
 import Section from '../Section';
-import DownloadDataButton from '../data/DownloadDataButton';
-import LegendSymbol from '../data/LegendSymbol';
-import PeriodSelector from '../data/PeriodSelector';
-import { usePeriodSelectorState } from '../data/usePeriodSelectorState';
+import DownloadDataButton from '../dataView/DownloadDataButton';
+import LegendSymbol from '../dataView/LegendSymbol';
+import PeriodSelector from '../dataView/PeriodSelector';
+import { usePeriodSelectorState } from '../dataView/usePeriodSelectorState';
 import { useMessageOrigins } from './useMessageOrigins';
 import { useTopFivePopularChannels } from './useTopFivePopularChannels';
 

apps/meteor/ee/client/views/admin/engagementDashboard/messages/MessagesSentSection.tsx

@@ -5,12 +5,12 @@ import { useTranslation } from '@rocket.chat/ui-contexts';
 import moment from 'moment';
 import React, { ReactElement, useMemo } from 'react';
 
-import CounterSet from '../../../../../../client/components/data/CounterSet';
+import CounterSet from '../../../../../../client/components/dataView/CounterSet';
 import Section from '../Section';
-import DownloadDataButton from '../data/DownloadDataButton';
-import PeriodSelector from '../data/PeriodSelector';
-import { usePeriodLabel } from '../data/usePeriodLabel';
-import { usePeriodSelectorState } from '../data/usePeriodSelectorState';
+import DownloadDataButton from '../dataView/DownloadDataButton';
+import PeriodSelector from '../dataView/PeriodSelector';
+import { usePeriodLabel } from '../dataView/usePeriodLabel';
+import { usePeriodSelectorState } from '../dataView/usePeriodSelectorState';
 import { useMessagesSent } from './useMessagesSent';
 
 const MessagesSentSection = (): ReactElement => {

apps/meteor/ee/client/views/admin/engagementDashboard/messages/useMessageOrigins.ts

@@ -1,7 +1,7 @@
 import { useQuery } from 'react-query';
 
 import { getFromRestApi } from '../../../../lib/getFromRestApi';
-import { getPeriodRange, Period } from '../data/periods';
+import { getPeriodRange, Period } from '../dataView/periods';
 
 type UseMessageOriginsOptions = { period: Period['key'] };
 

apps/meteor/ee/client/views/admin/engagementDashboard/messages/useMessagesSent.ts

@@ -1,7 +1,7 @@
 import { useQuery } from 'react-query';
 
 import { getFromRestApi } from '../../../../lib/getFromRestApi';
-import { getPeriodRange, Period } from '../data/periods';
+import { getPeriodRange, Period } from '../dataView/periods';
 
 type UseMessagesSentOptions = { period: Period['key'] };
 

apps/meteor/ee/client/views/admin/engagementDashboard/messages/useTopFivePopularChannels.ts

@@ -1,7 +1,7 @@
 import { useQuery } from 'react-query';
 
 import { getFromRestApi } from '../../../../lib/getFromRestApi';
-import { getPeriodRange, Period } from '../data/periods';
+import { getPeriodRange, Period } from '../dataView/periods';
 
 type UseTopFivePopularChannelsOptions = { period: Period['key'] };
 

apps/meteor/ee/client/views/admin/engagementDashboard/users/ActiveUsersSection.tsx

@@ -5,11 +5,11 @@ import { useTranslation } from '@rocket.chat/ui-contexts';
 import moment from 'moment';
 import React, { ReactElement, useMemo } from 'react';
 
-import CounterSet from '../../../../../../client/components/data/CounterSet';
+import CounterSet from '../../../../../../client/components/dataView/CounterSet';
 import { useFormatDate } from '../../../../../../client/hooks/useFormatDate';
 import Section from '../Section';
-import DownloadDataButton from '../data/DownloadDataButton';
-import LegendSymbol from '../data/LegendSymbol';
+import DownloadDataButton from '../dataView/DownloadDataButton';
+import LegendSymbol from '../dataView/LegendSymbol';
 import { useActiveUsers } from './useActiveUsers';
 
 type ActiveUsersSectionProps = {

apps/meteor/ee/client/views/admin/engagementDashboard/users/NewUsersSection.tsx

@@ -6,13 +6,13 @@ import { useTranslation } from '@rocket.chat/ui-contexts';
 import moment from 'moment';
 import React, { ReactElement, useMemo } from 'react';
 
-import CounterSet from '../../../../../../client/components/data/CounterSet';
+import CounterSet from '../../../../../../client/components/dataView/CounterSet';
 import { useFormatDate } from '../../../../../../client/hooks/useFormatDate';
 import Section from '../Section';
-import DownloadDataButton from '../data/DownloadDataButton';
-import PeriodSelector from '../data/PeriodSelector';
-import { usePeriodLabel } from '../data/usePeriodLabel';
-import { usePeriodSelectorState } from '../data/usePeriodSelectorState';
+import DownloadDataButton from '../dataView/DownloadDataButton';
+import PeriodSelector from '../dataView/PeriodSelector';
+import { usePeriodLabel } from '../dataView/usePeriodLabel';
+import { usePeriodSelectorState } from '../dataView/usePeriodSelectorState';
 import { useNewUsers } from './useNewUsers';
 
 const TICK_WIDTH = 45;

apps/meteor/ee/client/views/admin/engagementDashboard/users/UsersByTimeOfTheDaySection.tsx

@@ -6,9 +6,9 @@ import moment from 'moment';
 import React, { ReactElement, useMemo } from 'react';
 
 import Section from '../Section';
-import DownloadDataButton from '../data/DownloadDataButton';
-import PeriodSelector from '../data/PeriodSelector';
-import { usePeriodSelectorState } from '../data/usePeriodSelectorState';
+import DownloadDataButton from '../dataView/DownloadDataButton';
+import PeriodSelector from '../dataView/PeriodSelector';
+import { usePeriodSelectorState } from '../dataView/usePeriodSelectorState';
 import { useUsersByTimeOfTheDay } from './useUsersByTimeOfTheDay';
 
 type UsersByTimeOfTheDaySectionProps = {

apps/meteor/ee/client/views/admin/engagementDashboard/users/useActiveUsers.ts

@@ -2,7 +2,7 @@ import moment from 'moment';
 import { useQuery } from 'react-query';
 
 import { getFromRestApi } from '../../../../lib/getFromRestApi';
-import { getPeriodRange } from '../data/periods';
+import { getPeriodRange } from '../dataView/periods';
 
 type UseActiveUsersOptions = { utc: boolean };
 

apps/meteor/ee/client/views/admin/engagementDashboard/users/useNewUsers.ts

@@ -1,7 +1,7 @@
 import { useQuery } from 'react-query';
 
 import { getFromRestApi } from '../../../../lib/getFromRestApi';
-import { getPeriodRange, Period } from '../data/periods';
+import { getPeriodRange, Period } from '../dataView/periods';
 
 type UseNewUsersOptions = { period: Period['key']; utc: boolean };
 

apps/meteor/ee/client/views/admin/engagementDashboard/users/useUsersByTimeOfTheDay.ts

@@ -1,7 +1,7 @@
 import { useQuery } from 'react-query';
 
 import { getFromRestApi } from '../../../../lib/getFromRestApi';
-import { getPeriodRange, Period } from '../data/periods';
+import { getPeriodRange, Period } from '../dataView/periods';
 
 type UseUsersByTimeOfTheDayOptions = { period: Period['key']; utc: boolean };
 

packages/ui-contexts/tsconfig.json

@@ -2,7 +2,9 @@
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "./src",
-		"outDir": "./dist"
+		"outDir": "./dist",
+		"resolveJsonModule": true,
+		"esModuleInterop": true,
 	},
 	"include": ["./src/**/*"]
 }