diff --git a/.changeset/soft-suns-sip.md b/.changeset/soft-suns-sip.md new file mode 100644 index 0000000000000..7e2dcd51a9d55 --- /dev/null +++ b/.changeset/soft-suns-sip.md @@ -0,0 +1,6 @@ +--- +"@rocket.chat/meteor": minor +"@rocket.chat/i18n": minor +--- + +Adds a "Collapse All" button to the Apps Logs Filter and moves existing "Expand All" button to a kebab menu diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogs.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogs.tsx index d47e7e68bd9ea..d321dd0684c49 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogs.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogs.tsx @@ -16,7 +16,11 @@ import { useLogs } from '../../../hooks/useLogs'; function expandedReducer( expandedStates: { id: string; expanded: boolean }[], - action: { type: 'update'; id: string; expanded: boolean } | { type: 'expand-all' } | { type: 'reset'; logs: ILogItem[] }, + action: + | { type: 'update'; id: string; expanded: boolean } + | { type: 'expand-all' } + | { type: 'reset-all' } + | { type: 'reset'; logs: ILogItem[] }, ) { switch (action.type) { case 'update': @@ -28,6 +32,9 @@ function expandedReducer( case 'reset': return action.logs.map((log) => ({ id: log._id, expanded: false })); + case 'reset-all': + return expandedStates.map((state) => ({ ...state, expanded: false })); + default: return expandedStates; } @@ -48,6 +55,8 @@ const AppLogs = ({ id }: { id: string }): ReactElement => { const handleExpandAll = () => dispatch({ type: 'expand-all' }); + const handleCollapseAll = () => dispatch({ type: 'reset-all' }); + const { data, isSuccess, isError, error, refetch, isFetching } = useLogs({ appId: id, current, @@ -84,6 +93,7 @@ const AppLogs = ({ id }: { id: string }): ReactElement => { noResults={isFetching || !isSuccess || data?.logs?.length === 0} isLoading={isFetching} expandAll={() => handleExpandAll()} + collapseAll={() => handleCollapseAll()} refetchLogs={() => refetch()} /> diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilter.stories.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilter.stories.tsx index 0c02a79c3b384..73d2a914cc2a1 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilter.stories.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilter.stories.tsx @@ -35,5 +35,11 @@ export default { } satisfies Meta; export const Default = () => ( - + ); diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilter.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilter.tsx index 5091fca7645bb..e9a3cb80556f6 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilter.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilter.tsx @@ -3,6 +3,7 @@ import { useRouter, useSetModal } from '@rocket.chat/ui-contexts'; import { Controller } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; +import AppsLogsFilterOptions from './AppLogsFilterOptions'; import CompactFilterOptions from './CompactFilterOptions'; import { EventFilterSelect } from './EventFilterSelect'; import { InstanceFilterSelect } from './InstanceFilterSelect'; @@ -15,12 +16,13 @@ import { ExportLogsModal } from './ExportLogsModal'; type AppsLogsFilterProps = { appId: string; expandAll: () => void; + collapseAll: () => void; refetchLogs: () => void; isLoading: boolean; noResults?: boolean; }; -export const AppLogsFilter = ({ appId, expandAll, refetchLogs, isLoading, noResults = false }: AppsLogsFilterProps) => { +export const AppLogsFilter = ({ appId, expandAll, collapseAll, refetchLogs, isLoading, noResults = false }: AppsLogsFilterProps) => { const { t } = useTranslation(); const { control, getValues } = useAppLogsFilterFormContext(); @@ -95,11 +97,6 @@ export const AppLogsFilter = ({ appId, expandAll, refetchLogs, isLoading, noResu } /> )} - {!compactMode && ( - - )} {!compactMode && ( )} + {!compactMode && } {compactMode && ( - + )} ); diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterOptions.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterOptions.tsx new file mode 100644 index 0000000000000..08cbc95056f37 --- /dev/null +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterOptions.tsx @@ -0,0 +1,35 @@ +import { Box, Icon, Menu } from '@rocket.chat/fuselage'; +import { useTranslation } from 'react-i18next'; + +type AppsLogsFilterOptionsProps = { + onExpandAll: () => void; + onCollapseAll: () => void; +}; + +const AppsLogsFilterOptions = ({ onExpandAll, onCollapseAll, ...props }: AppsLogsFilterOptionsProps) => { + const { t } = useTranslation(); + + const menuOptions = { + expandAll: { + label: ( + + + {t('Expand_all')} + + ), + action: onExpandAll, + }, + collapseAll: { + label: ( + + + {t('Collapse_all')} + + ), + action: onCollapseAll, + }, + }; + return ; +}; + +export default AppsLogsFilterOptions; diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/CompactFilterOptions.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/CompactFilterOptions.tsx index b0479681974c9..d2e822855e1d1 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/CompactFilterOptions.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/CompactFilterOptions.tsx @@ -3,12 +3,20 @@ import { useTranslation } from 'react-i18next'; type CompactFilterOptionsProps = { onExpandAll: () => void; + onCollapseAll: () => void; onRefreshLogs: () => void; onExportLogs: () => void; isLoading: boolean; }; -const CompactFilterOptions = ({ onExportLogs, onExpandAll, onRefreshLogs, isLoading, ...props }: CompactFilterOptionsProps) => { +const CompactFilterOptions = ({ + onExportLogs, + onExpandAll, + onCollapseAll, + onRefreshLogs, + isLoading, + ...props +}: CompactFilterOptionsProps) => { const { t } = useTranslation(); const menuOptions = { @@ -30,6 +38,15 @@ const CompactFilterOptions = ({ onExportLogs, onExpandAll, onRefreshLogs, isLoad ), action: onExpandAll, }, + collapseAll: { + label: ( + + + {t('Collapse_all')} + + ), + action: onCollapseAll, + }, refreshLogs: { label: ( diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/__snapshots__/AppLogsFilterExpanded.spec.tsx.snap b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/__snapshots__/AppLogsFilterExpanded.spec.tsx.snap index 9ef55418e6ff4..6669c6d6e26f7 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/__snapshots__/AppLogsFilterExpanded.spec.tsx.snap +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/__snapshots__/AppLogsFilterExpanded.spec.tsx.snap @@ -204,22 +204,6 @@ exports[`renders AppLogsItem without crashing 1`] = ` - + diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json index 90c0acd18355d..9d3b80c2f8052 100644 --- a/packages/i18n/src/locales/en.i18n.json +++ b/packages/i18n/src/locales/en.i18n.json @@ -1088,6 +1088,7 @@ "Cloud_workspace_support": "If you have trouble with a cloud service, please try to sync first. Should the issue persist, please open a support ticket in the Cloud Console.", "Collaborative": "Collaborative", "Collapse": "Collapse", + "Collapse_all": "Collapse All", "Collapse_Embedded_Media_By_Default": "Collapse Embedded Media by Default", "Color": "Color", "Colors": "Colors",