upstream-rocketchat/apps/meteor/client/views/room/contextualBar/uikit/UiKitContextualBar.tsx

import { Avatar, Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
import { useStableCallback } from '@rocket.chat/fuselage-hooks';
import {
	UiKitComponent,
	UiKitContextualBar as UiKitContextualBarSurfaceRender,
	contextualBarParser,
	UiKitContext,
} from '@rocket.chat/fuselage-ui-kit';
import {
	ContextualbarHeader,
	ContextualbarTitle,
	ContextualbarClose,
	ContextualbarDialog,
	ContextualbarScrollableContent,
	ContextualbarFooter,
} from '@rocket.chat/ui-client';
import { useRoomToolbox } from '@rocket.chat/ui-contexts';
import type * as UiKit from '@rocket.chat/ui-kit';
import type { FormEvent, UIEvent } from 'react';
import { memo } from 'react';

import { getURL } from '../../../../lib/getURL';
import { preventSyntheticEvent } from '../../../../lib/utils/preventSyntheticEvent';
import { useContextualBarContextValue } from '../../../../uikit/hooks/useContextualBarContextValue';
import { useUiKitActionManager } from '../../../../uikit/hooks/useUiKitActionManager';
import { useUiKitView } from '../../../../uikit/hooks/useUiKitView';
import { getButtonStyle } from '../../../modal/uikit/getButtonStyle';
import { useRoom } from '../../contexts/RoomContext';

export type UiKitContextualBarProps = {
	key: UiKit.ContextualBarView['id']; // force re-mount when viewId changes
	initialView: UiKit.ContextualBarView;
};

const UiKitContextualBar = ({ initialView }: UiKitContextualBarProps) => {
	const actionManager = useUiKitActionManager();
	const { view, values, updateValues, state } = useUiKitView(initialView);
	const room = useRoom();
	const contextValue = useContextualBarContextValue({ view, values, updateValues, rid: room._id });

	const { closeTab } = useRoomToolbox();

	const handleSubmit = useStableCallback((e: FormEvent) => {
		preventSyntheticEvent(e);
		closeTab();
		void actionManager.emitInteraction(view.appId, {
			type: 'viewSubmit',
			payload: {
				view: {
					...view,
					state,
				},
			},
			viewId: view.id,
			rid: room._id,
		});
	});

	const handleCancel = useStableCallback((e: UIEvent) => {
		preventSyntheticEvent(e);
		closeTab();
		void actionManager.emitInteraction(view.appId, {
			type: 'viewClosed',
			payload: {
				viewId: view.id,
				view: {
					...view,
					state,
				},
				isCleared: false,
			},
			rid: room._id,
		});
	});

	const handleClose = useStableCallback((e: UIEvent) => {
		preventSyntheticEvent(e);
		closeTab();
		void actionManager.emitInteraction(view.appId, {
			type: 'viewClosed',
			payload: {
				viewId: view.id,
				view: {
					...view,
					state,
				},
				isCleared: true,
			},
			rid: room._id,
		});
	});

	return (
		<UiKitContext.Provider value={contextValue}>
			<ContextualbarDialog>
				<ContextualbarHeader>
					<Avatar url={getURL(`/api/apps/${view.appId}/icon`)} />
					<ContextualbarTitle>{contextualBarParser.renderTextObject(view.title, 0)}</ContextualbarTitle>
					{handleClose && <ContextualbarClose onClick={handleClose} />}
				</ContextualbarHeader>
				<ContextualbarScrollableContent>
					<Box is='form' method='post' action='#' onSubmit={handleSubmit}>
						<UiKitComponent render={UiKitContextualBarSurfaceRender} blocks={view.blocks} />
					</Box>
				</ContextualbarScrollableContent>
				<ContextualbarFooter>
					<ButtonGroup stretch>
						{view.close && (
							<Button danger={view.close.style === 'danger'} onClick={handleCancel}>
								{contextualBarParser.renderTextObject(view.close.text, 0)}
							</Button>
						)}

						{view.submit && (
							<Button {...getButtonStyle(view.submit)} onClick={handleSubmit}>
								{contextualBarParser.renderTextObject(view.submit.text, 1)}
							</Button>
						)}
					</ButtonGroup>
				</ContextualbarFooter>
			</ContextualbarDialog>
		</UiKitContext.Provider>
	);
};

export default memo(UiKitContextualBar);