RocketChat · kodiakhq · Jul 17, 2025 · Jul 8, 2025 · Jun 9, 2025 · Jul 15, 2025
diff --git a/.changeset/serious-apricots-compare.md b/.changeset/serious-apricots-compare.md
@@ -0,0 +1,7 @@
+---
+'@rocket.chat/rest-typings': minor
+'@rocket.chat/apps-engine': minor
+'@rocket.chat/meteor': minor
+---
+
+Adds an endpoint to export apps logs as files
@@ -25,7 +25,7 @@ const AppLogs = ({ id }: { id: string }): ReactElement => {
 
 	const debouncedEvent = useDebouncedValue(event, 500);
 
-	const { data, isSuccess, isError, isFetching, error } = useLogs({
+	const { data, isSuccess, isError, error, isFetching } = useLogs({
 		appId: id,
 		current,
 		itemsPerPage,
@@ -50,13 +50,12 @@ const AppLogs = ({ id }: { id: string }): ReactElement => {
 	return (
 		<>
 			<Box pb={16}>
-				<AppLogsFilter />
+				<AppLogsFilter noResults={isFetching || !isSuccess || data?.logs?.length === 0} isLoading={isFetching} />
 			</Box>
 			{isFetching && <AccordionLoading />}
 			{isError && <GenericError title={parsedError} />}
-			{isSuccess && data?.logs?.length === 0 ? (
-				<GenericNoResults />
-			) : (
+			{!isFetching && isSuccess && data?.logs?.length === 0 && <GenericNoResults />}
+			{!isFetching && isSuccess && data?.logs?.length > 0 && (
 				<CustomScrollbars>
 					<CollapsiblePanel aria-busy={isFetching || event !== debouncedEvent} width='100%' alignSelf='center'>
 						{data?.logs?.map((log, index) => <AppLogsItem regionId={log._id} key={`${index}-${log._createdAt}`} {...log} />)}

@@ -32,13 +32,17 @@ const AppLogsItem = ({ regionId, ...props }: AppLogsItemProps) => {
 		</>
 	);
 
+	const handleClick = () => {
+		setExpanded(!expanded);
+	};
+
 	const anchorRef = useRef<HTMLDivElement>(null);
 
 	const formatDateAndTime = useFormatDateAndTime();
 
 	return (
 		<>
-			<CollapseButton regionId={regionId} expanded={expanded} onClick={() => setExpanded(!expanded)}>
+			<CollapseButton regionId={regionId} expanded={expanded} onClick={handleClick}>
 				<Box ref={anchorRef}>{title}</Box>
 			</CollapseButton>
 

@@ -1,18 +1,27 @@
-import { Box, Button, Icon, Label, Palette, TextInput } from '@rocket.chat/fuselage';
-import { useRouter } from '@rocket.chat/ui-contexts';
+import { Box, Button, Icon, IconButton, Label, Palette, TextInput } from '@rocket.chat/fuselage';
+import { useRouter, useSetModal } from '@rocket.chat/ui-contexts';
 import { Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
+import CompactFilterOptions from './AppsLogsFilterOptionsCompact';
 import { InstanceFilterSelect } from './InstanceFilterSelect';
 import { SeverityFilterSelect } from './SeverityFilterSelect';
 import { TimeFilterSelect } from './TimeFilterSelect';
 import { useCompactMode } from '../../../useCompactMode';
 import { useAppLogsFilterFormContext } from '../useAppLogsFilterForm';
+import { ExportLogsModal } from './ExportLogsModal';
 
-export const AppLogsFilter = () => {
+type AppsLogsFilterProps = {
+	isLoading?: boolean;
+	noResults?: boolean;
+};
+
+export const AppLogsFilter = ({ isLoading = false, noResults = false }: AppsLogsFilterProps) => {
 	const { t } = useTranslation();
 
-	const { control } = useAppLogsFilterFormContext();
+	const { control, getValues } = useAppLogsFilterFormContext();
+
+	const setModal = useSetModal();
 
 	const router = useRouter();
 
@@ -26,6 +35,10 @@ export const AppLogsFilter = () => {
 		);
 	};
 
+	const openExportModal = () => {
+		setModal(<ExportLogsModal onClose={() => setModal(null)} filterValues={getValues()} />);
+	};
+
 	const compactMode = useCompactMode();
 
 	return (
@@ -70,11 +83,25 @@ export const AppLogsFilter = () => {
 					<Controller control={control} name='severity' render={({ field }) => <SeverityFilterSelect id='severityFilter' {...field} />} />
 				</Box>
 			)}
+			{!compactMode && (
+				<IconButton
+					title={noResults ? t('No_data_to_export') : t('Export')}
+					alignSelf='flex-end'
+					icon='circle-arrow-down'
+					disabled={noResults}
+					secondary
+					mie={10}
+					onClick={() => openExportModal()}
+					aria-label={noResults ? t('No_data_to_export') : t('Export')}
+					aria-disabled={noResults}
+				/>
+			)}
 			{compactMode && (
 				<Button alignSelf='flex-end' icon='customize' secondary mie={10} onClick={() => openContextualBar()}>
 					{t('Filters')}
 				</Button>
 			)}
+			{compactMode && <CompactFilterOptions isLoading={isLoading} handleExportLogs={openExportModal} />}
 		</Box>
 	);
 };
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 import { mockAppRoot } from '@rocket.chat/mock-providers';
 import { composeStories } from '@storybook/react';
 import { render, screen } from '@testing-library/react';

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 import { mockAppRoot } from '@rocket.chat/mock-providers';
 import { composeStories } from '@storybook/react';
 import { render, screen } from '@testing-library/react';

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 import { mockAppRoot } from '@rocket.chat/mock-providers';
 import { composeStories } from '@storybook/react';
 import { render, screen } from '@testing-library/react';

@@ -0,0 +1,26 @@
+import { Box, Icon, Menu } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+type CompactFilterOptionsProps = {
+	handleExportLogs: () => void;
+	isLoading: boolean;
+};
+
+const CompactFilterOptions = ({ handleExportLogs, ...props }: CompactFilterOptionsProps) => {
+	const { t } = useTranslation();
+
+	const menuOptions = {
+		exportLogs: {
+			label: (
+				<Box>
+					<Icon name='circle-arrow-down' size='x16' marginInlineEnd={4} />
+					{t('Export')}
+				</Box>
+			),
+			action: handleExportLogs,
+		},
+	};
+	return <Menu title={t('Options')} small={false} alignSelf='flex-end' options={menuOptions} {...props} />;
+};
+
+export default CompactFilterOptions;
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 import { mockAppRoot } from '@rocket.chat/mock-providers';
 import { composeStories } from '@storybook/react';
 import { render, screen } from '@testing-library/react';

@@ -0,0 +1,23 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { composeStories } from '@storybook/react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import * as stories from './ExportLogsModal.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+test.each(testCases)(`renders without crashing`, async (_storyname, Story) => {
+	const view = render(<Story />, {
+		wrapper: mockAppRoot().build(),
+	});
+	expect(view.baseElement).toMatchSnapshot();
+});
+
+test.each(testCases)('Should have no a11y violations', async (_storyname, Story) => {
+	const { container } = render(<Story />, { wrapper: mockAppRoot().build() });
+
+	const results = await axe(container);
+
+	expect(results).toHaveNoViolations();
+});
@@ -0,0 +1,39 @@
+import { Box } from '@rocket.chat/fuselage';
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { action } from '@storybook/addon-actions';
+import type { Meta, StoryFn } from '@storybook/react';
+import type { ComponentProps } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import { ExportLogsModal } from './ExportLogsModal';
+
+export default {
+	title: 'Marketplace/AppDetailsPage/AppLogs/Filters/ExportLogsModal',
+	component: ExportLogsModal,
+	args: {
+		onClose: action('onClose'),
+		filterValues: {
+			severity: 'all',
+			event: '',
+			startDate: '',
+			endDate: '',
+		},
+	},
+	decorators: [
+		mockAppRoot().buildStoryDecorator(),
+		(fn) => {
+			const methods = useForm({});
+
+			return (
+				<FormProvider {...methods}>
+					<Box p={16}>{fn()}</Box>
+				</FormProvider>
+			);
+		},
+	],
+	parameters: {
+		layout: 'fullscreen',
+	},
+} satisfies Meta<typeof ExportLogsModal>;
+
+export const Default: StoryFn<ComponentProps<typeof ExportLogsModal>> = (args) => <ExportLogsModal {...args} />;