[7.4 Only] LPS-124354 Apply activity section on edit and view entry pages

modules/apps/app-builder/app-builder-web/src/main/resources/META-INF/resources/js/utils/time.es.js

@@ -24,4 +24,7 @@ const getLanguage = () => {
 	return languages[language] || language;
 };
 
+export const formatDate = (date, format) =>
+	moment(date).locale(getLanguage()).format(format);
+
 export const fromNow = (date) => moment(date).locale(getLanguage()).fromNow();

modules/dxp/apps/app-builder-workflow/app-builder-workflow-web/build.gradle

@@ -9,6 +9,7 @@ dependencies {
 	compileOnly project(":apps:dynamic-data-lists:dynamic-data-lists-api")
 	compileOnly project(":apps:dynamic-data-mapping:dynamic-data-mapping-api")
 	compileOnly project(":apps:frontend-js:frontend-js-loader-modules-extender-api")
+	compileOnly project(":apps:frontend-taglib:frontend-taglib-react")
 	compileOnly project(":apps:portal-workflow:portal-workflow-api")
 	compileOnly project(":apps:portal-workflow:portal-workflow-kaleo-definition-api")
 	compileOnly project(":core:petra:petra-function")

modules/dxp/apps/app-builder-workflow/app-builder-workflow-web/package.json

@@ -12,6 +12,7 @@
 		"classnames": "2.2.6",
 		"frontend-js-react-web": "*",
 		"frontend-js-web": "*",
+		"moment": "2.24.0",
 		"path-to-regexp": "3.0.0"
 	},
 	"description": "",

modules/dxp/apps/app-builder-workflow/app-builder-workflow-web/src/main/resources/META-INF/resources/css/ActivitySection.scss

@@ -0,0 +1,63 @@
+.activity-section {
+	overflow: hidden;
+	padding-bottom: 1.5rem;
+
+	.activity-collapsable {
+		margin-bottom: 1rem;
+
+		.activity {
+			padding: 14px 0;
+
+			&:not(:first-child) {
+				border-top: solid thin #e7e7ed;
+			}
+
+			&:last-child {
+				padding-bottom: 0;
+			}
+
+			p {
+				margin-bottom: 0.5rem;
+
+				&.description {
+					font-size: 16px;
+				}
+			}
+		}
+
+		&__arrow {
+			color: #6b6c7e;
+			transition: transform 0.2s ease-in-out;
+
+			&.collapsed {
+				transform: rotate(-90deg);
+			}
+		}
+
+		&__content {
+			height: auto;
+			max-height: 50vh;
+			transition: max-height 0.3s ease-in-out;
+
+			&.collapsed {
+				max-height: 0;
+				overflow: hidden;
+			}
+		}
+
+		&__header {
+			align-items: center;
+			border-bottom: 1px solid #a7a9bc;
+			cursor: pointer;
+			display: flex;
+			justify-content: space-between;
+			padding-bottom: 4px;
+		}
+
+		&__title {
+			color: #272833;
+			font-weight: 600;
+			text-transform: uppercase;
+		}
+	}
+}

modules/dxp/apps/app-builder-workflow/app-builder-workflow-web/src/main/resources/META-INF/resources/dynamic_include/edit_app_entry.jsp

@@ -14,4 +14,15 @@
  */
 --%>
 
-<%@ include file="/dynamic_include/init.jsp" %>
+<%@ include file="/dynamic_include/init.jsp" %>
+
+<div>
+	<react:component
+		module="js/pages/entry/activity/ActivitySection.es"
+		props='<%=
+			HashMapBuilder.<String, Object>put(
+				"workflowInstanceId", GetterUtil.getLong(request.getAttribute(WorkflowWebKeys.WORKFLOW_INSTANCE_ID))
+			).build()
+		%>'
+	/>
+</div>

modules/dxp/apps/app-builder-workflow/app-builder-workflow-web/src/main/resources/META-INF/resources/dynamic_include/init.jsp

@@ -12,4 +12,10 @@
  *
  *
  */
---%>
+--%>
+
+<%@ taglib uri="http://liferay.com/tld/react" prefix="react" %>
+
+<%@ page import="com.liferay.portal.kernel.util.GetterUtil" %><%@
+page import="com.liferay.portal.kernel.util.HashMapBuilder" %><%@
+page import="com.liferay.portal.workflow.constants.WorkflowWebKeys" %>

modules/dxp/apps/app-builder-workflow/app-builder-workflow-web/src/main/resources/META-INF/resources/js/pages/entry/ViewEntry.es.js

@@ -28,6 +28,7 @@ import React, {useContext, useEffect, useState} from 'react';
 import WorkflowInfoBar from '../../components/workflow-info-bar/WorkflowInfoBar.es';
 import useDataLayouts from '../../hooks/useDataLayouts.es';
 import ReassignEntryModal from './ReassignEntryModal.es';
+import ActivitySection from './activity/ActivitySection.es';
 
 export default function ViewEntry({
 	history,
@@ -281,6 +282,12 @@ export default function ViewEntry({
 										</div>
 									)
 								)}
+
+							{workflowInfo?.instanceId && (
+								<ActivitySection
+									workflowInstanceId={workflowInfo.instanceId}
+								/>
+							)}
 						</div>
 					</div>
 				</div>

modules/dxp/apps/app-builder-workflow/app-builder-workflow-web/src/main/resources/META-INF/resources/js/pages/entry/activity/ActivityCollapsableList.es.js

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
+ *
+ * The contents of this file are subject to the terms of the Liferay Enterprise
+ * Subscription License ("License"). You may not use this file except in
+ * compliance with the License. You can obtain a copy of the License by
+ * contacting Liferay, Inc. See the License for the specific language governing
+ * permissions and limitations under the License, including but not limited to
+ * distribution rights of the Software.
+ */
+
+import ClayIcon from '@clayui/icon';
+import classNames from 'classnames';
+import React, {useState} from 'react';
+
+import ActivityItem from './ActivityItem.es';
+
+function ActivityCollapsableList({items, title}) {
+	const [expanded, setExpanded] = useState(true);
+
+	return (
+		<div className="activity-collapsable">
+			<div
+				className="activity-collapsable__header"
+				onClick={() => setExpanded(!expanded)}
+			>
+				<span className="activity-collapsable__title">{title}</span>
+
+				<ClayIcon
+					className={classNames(
+						'activity-collapsable__arrow',
+						!expanded && 'collapsed'
+					)}
+					symbol="angle-down"
+				/>
+			</div>
+
+			<div
+				className={classNames(
+					'activity-collapsable__content',
+					!expanded && 'collapsed'
+				)}
+			>
+				{items.map((item, index) => (
+					<ActivityCollapsableList.Item key={index} {...item} />
+				))}
+			</div>
+		</div>
+	);
+}
+
+ActivityCollapsableList.Item = ActivityItem;
+export default ActivityCollapsableList;

modules/dxp/apps/app-builder-workflow/app-builder-workflow-web/src/main/resources/META-INF/resources/js/pages/entry/activity/ActivityItem.es.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
+ *
+ * The contents of this file are subject to the terms of the Liferay Enterprise
+ * Subscription License ("License"). You may not use this file except in
+ * compliance with the License. You can obtain a copy of the License by
+ * contacting Liferay, Inc. See the License for the specific language governing
+ * permissions and limitations under the License, including but not limited to
+ * distribution rights of the Software.
+ */
+
+import {formatDate} from 'app-builder-web/js/utils/time.es';
+import React from 'react';
+
+export default function ActivityItem({commentLog, dateCreated, description}) {
+	const formattedDate = `${formatDate(dateCreated, 'l')} — ${formatDate(
+		dateCreated,
+		'LT'
+	)}`;
+
+	return (
+		<div className="activity">
+			<p className="description">{description}</p>
+
+			{commentLog && <p>{commentLog}</p>}
+
+			<div className="font-weight-semi-bold text-secondary">
+				{formattedDate}
+			</div>
+		</div>
+	);
+}

modules/dxp/apps/app-builder-workflow/app-builder-workflow-web/src/main/resources/META-INF/resources/js/pages/entry/activity/ActivitySection.es.js

@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
+ *
+ * The contents of this file are subject to the terms of the Liferay Enterprise
+ * Subscription License ("License"). You may not use this file except in
+ * compliance with the License. You can obtain a copy of the License by
+ * contacting Liferay, Inc. See the License for the specific language governing
+ * permissions and limitations under the License, including but not limited to
+ * distribution rights of the Software.
+ */
+
+import {Loading} from 'app-builder-web/js/components/loading/Loading.es';
+import {getItem} from 'app-builder-web/js/utils/client.es';
+import {formatDate} from 'app-builder-web/js/utils/time.es';
+import moment from 'moment';
+import React, {useEffect, useState} from 'react';
+
+import ActivityCollapsableList from './ActivityCollapsableList.es';
+
+import '../../../../css/ActivitySection.scss';
+
+function ActivitySection({workflowInstanceId}) {
+	const [isLoading, setLoading] = useState(true);
+	const [activities, setActivities] = useState([]);
+
+	const groupActivities = (activities) => {
+		const isToday = (date) => moment().isSame(date, 'day');
+
+		const formattedItems = activities.map((activity) => {
+			const formattedDate = isToday(activity.dateCreated)
+				? Liferay.Language.get('today')
+				: formatDate(activity.dateCreated, 'LL');
+
+			return {...activity, formattedDate};
+		});
+
+		return Object.entries(
+			formattedItems.reduce((groupedActivities, activity) => {
+				(groupedActivities[activity.formattedDate] =
+					groupedActivities[activity.formattedDate] || []).push(
+					activity
+				);
+
+				return groupedActivities;
+			}, {})
+		);
+	};
+
+	useEffect(() => {
+		setLoading(true);
+
+		getItem(
+			`/o/headless-admin-workflow/v1.0/workflow-instances/${workflowInstanceId}/workflow-logs`,
+			{
+				page: -1,
+				pageSize: -1,
+				types: [
+					'TaskAssign',
+					'TaskCompletion',
+					'TaskUpdate',
+					'Transition',
+				],
+			}
+		)
+			.then(({items}) => {
+				setLoading(false);
+
+				setActivities(groupActivities(items));
+			})
+			.catch(() => {
+				setLoading(false);
+			});
+	}, [workflowInstanceId]);
+
+	return (
+		<>
+			<h3 className="mt-4">{Liferay.Language.get('activity')}</h3>
+
+			<div className="activity-section sheet">
+				<Loading isLoading={isLoading}>
+					{activities.map(([title, items], index) => (
+						<ActivitySection.CollapsableList
+							items={items}
+							key={index}
+							title={title}
+						/>
+					))}
+				</Loading>
+			</div>
+		</>
+	);
+}
+
+ActivitySection.CollapsableList = ActivityCollapsableList;
+export default ActivitySection;