feat: App Logs Collapse All (RocketChat#36558)

Author: MartinSchoeler

.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

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()}
 				/>
 			</Box>

apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilter.stories.tsx

@@ -35,5 +35,11 @@ export default {
 } satisfies Meta<typeof AppLogsFilter>;
 
 export const Default = () => (
-	<AppLogsFilter appId='app-id' expandAll={action('expandAll')} refetchLogs={action('refetchLogs')} isLoading={false} />
+	<AppLogsFilter
+		appId='app-id'
+		expandAll={action('expandAll')}
+		collapseAll={action('collapseAll')}
+		refetchLogs={action('refetchLogs')}
+		isLoading={false}
+	/>
 );

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
 					<Controller control={control} name='severity' render={({ field }) => <SeverityFilterSelect id='severityFilter' {...field} />} />
 				</Box>
 			)}
-			{!compactMode && (
-				<Button alignSelf='flex-end' icon='arrow-expand' secondary mie={10} onClick={() => openAllLogs()}>
-					{t('Expand_all')}
-				</Button>
-			)}
 			{!compactMode && (
 				<IconButton
 					title={isLoading ? t('Loading') : t('Refresh_logs')}
@@ -129,8 +126,15 @@ export const AppLogsFilter = ({ appId, expandAll, refetchLogs, isLoading, noResu
 					{t('Filters')}
 				</Button>
 			)}
+			{!compactMode && <AppsLogsFilterOptions onExpandAll={openAllLogs} onCollapseAll={collapseAll} />}
 			{compactMode && (
-				<CompactFilterOptions isLoading={isLoading} onExportLogs={openExportModal} onExpandAll={openAllLogs} onRefreshLogs={refreshLogs} />
+				<CompactFilterOptions
+					isLoading={isLoading}
+					onExportLogs={openExportModal}
+					onExpandAll={openAllLogs}
+					onCollapseAll={collapseAll}
+					onRefreshLogs={refreshLogs}
+				/>
 			)}
 		</Box>
 	);

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: (
+				<Box>
+					<Icon name='arrow-expand' size='x16' marginInlineEnd={4} />
+					{t('Expand_all')}
+				</Box>
+			),
+			action: onExpandAll,
+		},
+		collapseAll: {
+			label: (
+				<Box>
+					<Icon name='arrow-collapse' size='x16' marginInlineEnd={4} />
+					{t('Collapse_all')}
+				</Box>
+			),
+			action: onCollapseAll,
+		},
+	};
+	return <Menu title={t('Options')} small={false} alignSelf='flex-end' options={menuOptions} {...props} />;
+};
+
+export default AppsLogsFilterOptions;

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: (
+				<Box>
+					<Icon name='arrow-collapse' size='x16' marginInlineEnd={4} />
+					{t('Collapse_all')}
+				</Box>
+			),
+			action: onCollapseAll,
+		},
 		refreshLogs: {
 			label: (
 				<Box>

apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/__snapshots__/AppLogsFilterExpanded.spec.tsx.snap

@@ -204,22 +204,6 @@ exports[`renders AppLogsItem without crashing 1`] = `
             </i>
           </button>
         </div>
-        <button
-          class="rcx-box rcx-box--full rcx-button--secondary rcx-button rcx-css-qv9v2f"
-          type="button"
-        >
-          <span
-            class="rcx-button--content"
-          >
-            <i
-              aria-hidden="true"
-              class="rcx-box rcx-box--full rcx-icon--name-arrow-expand rcx-icon rcx-css-1hdf9ok"
-            >
-              
-            </i>
-            Expand_all
-          </span>
-        </button>
         <button
           class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-css-qv9v2f"
           title="Refresh_logs"
@@ -246,6 +230,19 @@ exports[`renders AppLogsItem without crashing 1`] = `
             
           </i>
         </button>
+        <button
+          class="rcx-box rcx-box--full rcx-button--large-square rcx-button--square rcx-button--icon rcx-button rcx-css-17zzf5z"
+          data-testid="menu"
+          title="Options"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="rcx-box rcx-box--full rcx-icon--name-kebab rcx-icon rcx-css-1x2l7ts"
+          >
+            
+          </i>
+        </button>
       </div>
     </div>
   </div>

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