ISSUE #5151 - activity log api request and file download

frontend/src/v4/routes/teamspaceSettings/teamspaceSettings.component.tsx

@@ -26,17 +26,15 @@ import { isEmpty } from 'lodash';
 
 import { Switch } from '@mui/material';
 import { formatDateTime } from '@/v5/helpers/intl.helper';
-import { DatePicker } from '@controls/inputs/datePicker/datePicker.component';
-import { Gap } from '@controls/gap';
 import { DateTimePicker } from '@controls/inputs/datePicker/dateTimePicker.component';
 import { FormattedMessage } from 'react-intl';
 import { formatMessage } from '@/v5/services/intl';
-import { DialogsActionsDispatchers } from '@/v5/services/actionsDispatchers';
+import { DialogsActionsDispatchers, TeamspacesActionsDispatchers } from '@/v5/services/actionsDispatchers';
+import dayjs from 'dayjs';
 import { ROUTES } from '../../constants/routes';
 import { ChipsInput } from '../components/chipsInput/chipsInput.component';
 import { Loader } from '../components/loader/loader.component';
 import { Panel } from '../components/panel/panel.component';
-import { DateField } from '../components/dateField/dateField.component';
 import { FileInputField } from './components/fileInputField/fileInputField.component';
 import {
 	BackButton,
@@ -280,8 +278,7 @@ export class TeamspaceSettings extends PureComponent<IProps, IState> {
 	}
 
 	private renderPermissionLogOption = () => {
-		const isAdmin = this.props.isTeamspaceAdmin;
-
+		const { isTeamspaceAdmin } = this.props;
 		return (
 			<PermissionsLogContainer gap="10px" container direction="column" wrap="nowrap">
 				<Headline color="textPrimary" variant="subtitle1">
@@ -296,45 +293,41 @@ export class TeamspaceSettings extends PureComponent<IProps, IState> {
 				<FileGrid container direction="row" justifyContent="space-between" alignItems="center" wrap="nowrap">
 					<Grid gap="10px" container alignItems="end" wrap="nowrap">
 						<DateTimePicker
-							disabled={!isAdmin}
+							disabled={!isTeamspaceAdmin}
 							disableFuture
 							label={formatMessage({ id: 'teamspaceSettings.permissionsLog.startDate', defaultMessage: 'Start Date' })}
-							maxDateTime={this.state.permissionsLogEnd && new Date(this.state.permissionsLogEnd)}
+							maxDateTime={dayjs(this.state.permissionsLogEnd)}
 							value={this.state.permissionsLogStart}
-							onChange={(val) => this.setState({ permissionsLogStart: val })}
+							onChange={(permissionsLogStart) => this.setState({ permissionsLogStart })}
 						/>
 						<DateTimePicker
-							disabled={!isAdmin}
+							disabled={!isTeamspaceAdmin}
 							disableFuture
 							label={formatMessage({ id: 'teamspaceSettings.permissionsLog.endDate', defaultMessage: 'End Date' })}
-							minDateTime={this.state.permissionsLogStart && new Date(this.state.permissionsLogStart)}
+							minDateTime={dayjs(this.state.permissionsLogStart)}
 							value={this.state.permissionsLogEnd}
-							onChange={(val) => this.setState({ permissionsLogEnd: val })}
+							onChange={(permissionsLogEnd) => this.setState({ permissionsLogEnd })}
 						/>
 						<Button
-							disabled={!isAdmin || (!this.state.permissionsLogStart && this.state.permissionsLogEnd)}
+							disabled={!isTeamspaceAdmin || (!this.state.permissionsLogStart && !this.state.permissionsLogEnd)}
 							color="primary"
 							variant="contained"
-							onClick={() => {
- 								DialogsActionsDispatchers.open('info', {
-									title: formatMessage({ id: 'teamspaceSettings.permissionsLog.modal.title', defaultMessage: 'Encrypted Download' }),
-									message: formatMessage({
-										id: 'teamspaceSettings.permissionsLog.modal.message',
-										defaultMessage: 'A password will be sent to your email for this encryoted download.',
-									}),
-									primaryButtonLabel: formatMessage({
-										id: 'teamspaceSettings.permissionsLog.modal.primaryLabel',
-										defaultMessage: 'Cancel',
-									}),
-									secondaryButtonLabel: formatMessage({
-										id: 'teamspaceSettings.permissionsLog.modal',
-										defaultMessage: 'Continue',
-									}),
-									onClickSecondary: () => {
-										console.log('download')
-									},
-								})
-							}}
+							onClick={() => DialogsActionsDispatchers.open('info', {
+								title: formatMessage({ id: 'teamspaceSettings.permissionsLog.modal.title', defaultMessage: 'Encrypted Download' }),
+								message: formatMessage({
+									id: 'teamspaceSettings.permissionsLog.modal.message',
+									defaultMessage: 'A password will be sent to your email for this encryoted download.',
+								}),
+								primaryButtonLabel: formatMessage({
+									id: 'teamspaceSettings.permissionsLog.modal.primaryLabel',
+									defaultMessage: 'Cancel',
+								}),
+								secondaryButtonLabel: formatMessage({
+									id: 'teamspaceSettings.permissionsLog.modal',
+									defaultMessage: 'Continue',
+								}),
+								onClickSecondary: () => TeamspacesActionsDispatchers.fetchActivityLog(this.teamspace, this.state.permissionsLogStart, this.state.permissionsLogEnd)
+							})}
 						>
 							<FormattedMessage id="teamspaceSettings.permissionsLog.download" defaultMessage="Download" />
 						</Button>

frontend/src/v5/services/api/teamspaces.ts

@@ -26,3 +26,8 @@ export const fetchAddons = async (teamspace: string): Promise<AddOn[]> => {
 	const { data } = await api.get(`teamspaces/${teamspace}/addOns`);
 	return data.modules;
 };
+
+export const fetchActivityLog = async (teamspace: string, from: Date, to: Date): Promise<any> => {
+	const { data } = await api.get(`teamspaces/${teamspace}/settings/activities/archive`, { from, to });
+	return data;
+};

frontend/src/v5/store/teamspaces/teamspaces.redux.ts

@@ -30,6 +30,7 @@ export const { Types: TeamspacesTypes, Creators: TeamspacesActions } = createAct
 	setCurrentTeamspace: ['currentTeamspace'],
 	setTeamspacesArePending: ['teamspacesArePending'],
 	fetchAddOnsSuccess: ['teamspace', 'addOns'],
+	fetchActivityLog: ['teamspace', 'startDate', 'endDate'],
 }, { prefix: 'TEAMSPACES2/' }) as { Types: Constants<ITeamspacesActionCreators>; Creators: ITeamspacesActionCreators };
 
 export const INITIAL_STATE: TeamspacesState = {
@@ -108,9 +109,9 @@ export type FetchQuotaSuccessAction = Action<'FETCH_QUOTA_SUCCESS'> & { teamspac
 export type SetCurrentTeamspaceAction = Action<'SET_CURRENT_TEAMSPACE'> & { currentTeamspace: string };
 export type SetTeamspacesArePendingAction = Action<'SET_TEAMSPACES_ARE_PENDING'> & { teamspacesArePending: boolean };
 export type SetUsedQuotaSeatsAction = Action<'SET_USED_QUOTA_SEATS'> & { teamspace: string, seats: number };
-
 export type FetchAddOnsAction = Action<'FETCH_ADD_ONS'> & { teamspace: string };
 export type FetchAddOnsSuccessAction = Action<'FETCH_ADD_ONS_SUCCESS'> & { teamspace: string, addOns: AddOn[] };
+export type FetchActivityLogAction = Action<'FETCH_ACTIVITY_LOG'> & { teamspace: string, startDate?: Date, endDate?: Date };
 
 export interface ITeamspacesActionCreators {
 	fetch: () => FetchAction;
@@ -121,4 +122,5 @@ export interface ITeamspacesActionCreators {
 	fetchQuotaSuccess: (teamspace: string, quota: Quota) => FetchQuotaSuccessAction;
 	setUsedQuotaSeats: (teamspace: string, seats: number) => SetUsedQuotaSeatsAction;
 	fetchAddOnsSuccess: (teamspace: string, addOns: AddOn[]) => FetchAddOnsSuccessAction;
+	fetchActivityLog: (teamspace: string, startDate?: Date, endDate?: Date) => FetchActivityLogAction;
 }

frontend/src/v5/store/teamspaces/teamspaces.sagas.ts

@@ -23,6 +23,7 @@ import { formatMessage } from '@/v5/services/intl';
 import { TeamspacesActions, TeamspacesTypes, ITeamspace } from './teamspaces.redux';
 import { RELOAD_PAGE_OR_CONTACT_SUPPORT_ERROR_MESSAGE } from '../store.helpers';
 import { selectIsFetchingAddons } from './teamspaces.selectors';
+import { formatFilenameDate } from '@/v5/helpers/intl.helper';
 
 export function* fetch() {
 	yield put(TeamspacesActions.setTeamspacesArePending(true));
@@ -58,15 +59,39 @@ export function* fetchQuota({ teamspace }) {
 	}
 }
 
-export  function* waitForAddons() {
+export function* waitForAddons() {
 	const isFetchingAddons = yield select(selectIsFetchingAddons);
 
 	if (isFetchingAddons) {
 		yield take(TeamspacesTypes.FETCH_ADD_ONS_SUCCESS);
 	}
 }
 
+export function* fetchActivityLog({ teamspace, startDate, endDate }) {
+	try {
+		const log = yield API.Teamspaces.fetchActivityLog(teamspace, startDate, endDate);
+		const url = window.URL.createObjectURL(new Blob([log]));
+		const link = document.createElement('a');
+		link.href = url;
+		const range = [startDate, endDate].filter(Boolean).map((date) => formatFilenameDate(date)).join('__');
+		link.download = formatMessage({ id: 'teamspaces.fetchActivityLog.filename', defaultMessage: 'activity_log_{range}.zip' }, { range });
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+	} catch (error) {
+		yield put(DialogsActions.open('alert', {
+			currentActions: formatMessage({
+				id: 'teamspaces.fetchActivityLog.error.action',
+				defaultMessage: 'fetching the activity log',
+			}),
+			error,
+			details: RELOAD_PAGE_OR_CONTACT_SUPPORT_ERROR_MESSAGE,
+		}));
+	}
+}
+
 export default function* TeamspacesSaga() {
 	yield takeLatest(TeamspacesTypes.FETCH as any, fetch);
 	yield takeLatest(TeamspacesTypes.FETCH_QUOTA as any, fetchQuota);
+	yield takeLatest(TeamspacesTypes.FETCH_ACTIVITY_LOG as any, fetchActivityLog);
 }

frontend/src/v5/ui/controls/inputs/datePicker/dateTimePicker.component.tsx

@@ -25,6 +25,7 @@ export const DateTimePicker = ({ onBlur, onChange, ...props }: DateTimePickerPro
 		rifmFormatter={formatDateTime}
 		onChange={(val) => {
 			onChange(val);
+			onBlur?.();
 			onBlur();
 		}}
 		{...props}