[FIX] Add the possibility of danger style prop to close button on UiKit contextual-bar component (#27533)

apps/meteor/client/views/blocks/ModalBlock.js

@@ -4,6 +4,7 @@ import { UiKitComponent, UiKitModal, modalParser } from '@rocket.chat/fuselage-u
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { getURL } from '../../../app/utils/lib/getURL';
+import { getButtonStyle } from './getButtonStyle';
 import './textParsers';
 
 const focusableElementsString = `
@@ -144,9 +145,13 @@ function ModalBlock({ view, errors, appId, onSubmit, onClose, onCancel }) {
 				</Modal.Content>
 				<Modal.Footer>
 					<Modal.FooterControllers>
-						{view.close && <Button onClick={onCancel}>{modalParser.text(view.close.text)}</Button>}
+						{view.close && (
+							<Button danger={view.close.style === 'danger'} onClick={onCancel}>
+								{modalParser.text(view.close.text)}
+							</Button>
+						)}
 						{view.submit && (
-							<Button primary onClick={onSubmit}>
+							<Button {...getButtonStyle(view)} onClick={onSubmit}>
 								{modalParser.text(view.submit.text)}
 							</Button>
 						)}

apps/meteor/client/views/blocks/getButtonStyle.ts

@@ -0,0 +1,5 @@
+import type { IUIKitSurface } from '@rocket.chat/apps-engine/definition/uikit';
+
+export const getButtonStyle = (view: IUIKitSurface): { danger: boolean } | { primary: boolean } => {
+	return view.submit?.style === 'danger' ? { danger: true } : { primary: true };
+};

apps/meteor/client/views/room/contextualBar/Apps/Apps.tsx

@@ -7,6 +7,7 @@ import React from 'react';
 import { getURL } from '../../../../../app/utils/lib/getURL';
 import VerticalBar from '../../../../components/VerticalBar';
 import { modalParser } from '../../../blocks/ModalBlock';
+import { getButtonStyle } from '../../../blocks/getButtonStyle';
 
 type AppsProps = {
 	view: IUIKitSurface;
@@ -30,9 +31,13 @@ const Apps = ({ view, onSubmit, onClose, onCancel, appId }: AppsProps): JSX.Elem
 		</VerticalBar.ScrollableContent>
 		<VerticalBar.Footer>
 			<ButtonGroup align='end'>
-				{view.close && <Button onClick={onCancel}>{modalParser.text(view.close.text)}</Button>}
+				{view.close && (
+					<Button danger={view.close.style === 'danger'} onClick={onCancel}>
+						{modalParser.text(view.close.text)}
+					</Button>
+				)}
 				{view.submit && (
-					<Button primary onClick={onSubmit}>
+					<Button {...getButtonStyle(view)} onClick={onSubmit}>
 						{modalParser.text(view.submit.text)}
 					</Button>
 				)}