From c5edd0435268d3f813c6c256cefe80a06e34c31c Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Wed, 19 Jun 2024 14:49:46 -0300
Subject: [PATCH] fix: Settings code mirror broken on full screen mode (#32625)
---
.changeset/odd-goats-fix.md | 5 +++++
.../CustomScrollbars/CustomScrollbars.tsx | 21 ++++++++++++-------
.../CustomScrollbars/VirtuosoScrollbars.tsx | 10 +++------
.../inputs/CodeMirror/CodeMirrorBox.tsx | 4 +++-
apps/meteor/tests/e2e/administration.spec.ts | 13 ++++++++++++
apps/meteor/tests/e2e/page-objects/admin.ts | 8 +++++++
6 files changed, 46 insertions(+), 15 deletions(-)
create mode 100644 .changeset/odd-goats-fix.md
diff --git a/.changeset/odd-goats-fix.md b/.changeset/odd-goats-fix.md
new file mode 100644
index 00000000000..9178620391b
--- /dev/null
+++ b/.changeset/odd-goats-fix.md
@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixes an issue where settings code mirror is not being displayed correctly in full screen mode
diff --git a/apps/meteor/client/components/CustomScrollbars/CustomScrollbars.tsx b/apps/meteor/client/components/CustomScrollbars/CustomScrollbars.tsx
index 18bdbdead14..ca718199076 100644
--- a/apps/meteor/client/components/CustomScrollbars/CustomScrollbars.tsx
+++ b/apps/meteor/client/components/CustomScrollbars/CustomScrollbars.tsx
@@ -1,8 +1,8 @@
import { Palette } from '@rocket.chat/fuselage';
import type { ScrollValues } from 'rc-scrollbars';
import { Scrollbars } from 'rc-scrollbars';
-import type { MutableRefObject, CSSProperties, ReactNode, ReactElement } from 'react';
-import React, { memo, forwardRef, useCallback } from 'react';
+import type { MutableRefObject, CSSProperties, ReactNode } from 'react';
+import React, { memo, forwardRef, useCallback, useMemo } from 'react';
export type CustomScrollbarsProps = {
overflowX?: boolean;
@@ -14,10 +14,18 @@ export type CustomScrollbarsProps = {
autoHide?: boolean;
};
+const styleDefault: CSSProperties = {
+ flexGrow: 1,
+ willChange: 'transform',
+ overflowY: 'hidden',
+};
+
const CustomScrollbars = forwardRef<HTMLElement, CustomScrollbarsProps>(function CustomScrollbars(
- { children, onScroll, overflowX, renderView, ...props },
+ { children, style, onScroll, overflowX, renderView, ...props },
ref,
) {
+ const scrollbarsStyle = useMemo(() => ({ ...style, ...styleDefault }), [style]);
+
const refSetter = useCallback(
(scrollbarRef) => {
if (ref && scrollbarRef) {
@@ -38,12 +46,11 @@ const CustomScrollbars = forwardRef<HTMLElement, CustomScrollbarsProps>(function
autoHide
autoHideTimeout={2000}
autoHideDuration={500}
+ style={scrollbarsStyle}
onScrollFrame={onScroll}
renderView={renderView}
- renderTrackHorizontal={
- overflowX ? undefined : (props): ReactElement => <div {...props} className='track-horizontal' style={{ display: 'none' }} />
- }
- renderThumbVertical={({ style, ...props }): JSX.Element => (
+ renderTrackHorizontal={overflowX ? undefined : (props) => <div {...props} className='track-horizontal' style={{ display: 'none' }} />}
+ renderThumbVertical={({ style, ...props }) => (
<div {...props} style={{ ...style, backgroundColor: Palette.stroke['stroke-dark'].toString(), borderRadius: '4px' }} />
)}
children={children}
diff --git a/apps/meteor/client/components/CustomScrollbars/VirtuosoScrollbars.tsx b/apps/meteor/client/components/CustomScrollbars/VirtuosoScrollbars.tsx
index a7d0371e4ab..b07083be1a0 100644
--- a/apps/meteor/client/components/CustomScrollbars/VirtuosoScrollbars.tsx
+++ b/apps/meteor/client/components/CustomScrollbars/VirtuosoScrollbars.tsx
@@ -1,4 +1,4 @@
-import type { ComponentProps, ReactElement, Ref } from 'react';
+import type { ComponentProps, Ref } from 'react';
import React, { forwardRef } from 'react';
import CustomScrollbars from './CustomScrollbars';
@@ -8,13 +8,9 @@ type VirtuosoScrollbarsProps = ComponentProps<typeof CustomScrollbars>;
const VirtuosoScrollbars = forwardRef(function VirtuosoScrollbars(
{ style, children, ...props }: VirtuosoScrollbarsProps,
ref: Ref<HTMLDivElement>,
-): ReactElement {
+) {
return (
- <CustomScrollbars
- style={{ ...style, flexGrow: 1, overflowY: 'hidden', width: '100%', willChange: 'transform' }}
- ref={ref}
- renderView={(viewProps): ReactElement => <div {...viewProps} {...props} />}
- >
+ <CustomScrollbars style={style} ref={ref} renderView={(viewProps) => <div {...viewProps} {...props} />}>
{children}
</CustomScrollbars>
);
diff --git a/apps/meteor/client/views/admin/settings/inputs/CodeMirror/CodeMirrorBox.tsx b/apps/meteor/client/views/admin/settings/inputs/CodeMirror/CodeMirrorBox.tsx
index ce6d2dfd600..3f61417e4fa 100644
--- a/apps/meteor/client/views/admin/settings/inputs/CodeMirror/CodeMirrorBox.tsx
+++ b/apps/meteor/client/views/admin/settings/inputs/CodeMirror/CodeMirrorBox.tsx
@@ -39,7 +39,9 @@ const CodeMirrorBox = ({ label, children }: { label: ReactNode; children: ReactE
{label}
</Box>
)}
- {children}
+ <Box display='flex' flexDirection='column' height='100%' role='code' aria-label={typeof label === 'string' ? label : undefined}>
+ {children}
+ </Box>
<Box mbs={8}>
<ButtonGroup>
<Button primary onClick={(): void => toggleFullScreen()}>
diff --git a/apps/meteor/tests/e2e/administration.spec.ts b/apps/meteor/tests/e2e/administration.spec.ts
index e4af3c26c10..703c4a4bd8b 100644
--- a/apps/meteor/tests/e2e/administration.spec.ts
+++ b/apps/meteor/tests/e2e/administration.spec.ts
@@ -335,5 +335,18 @@ test.describe.parallel('administration', () => {
await poAdmin.btnResetSiteURL.click();
});
});
+
+ test.describe('Layout', () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto('/admin/settings/Layout');
+ });
+
+ test('should code mirror full screen be displayed correctly', async ({ page }) => {
+ await poAdmin.getAccordionBtnByName('Custom CSS').click();
+ await poAdmin.btnFullScreen.click();
+
+ await expect(page.getByRole('code')).toHaveCSS('width', '920px');
+ });
+ });
});
});
diff --git a/apps/meteor/tests/e2e/page-objects/admin.ts b/apps/meteor/tests/e2e/page-objects/admin.ts
index 210dbc95f32..43f33d3a335 100644
--- a/apps/meteor/tests/e2e/page-objects/admin.ts
+++ b/apps/meteor/tests/e2e/page-objects/admin.ts
@@ -256,4 +256,12 @@ export class Admin {
get inputWebhookUrl(): Locator {
return this.page.getByRole('textbox', { name: 'Webhook URL' });
}
+
+ getAccordionBtnByName(name: string): Locator {
+ return this.page.getByRole('button', { name });
+ }
+
+ get btnFullScreen(): Locator {
+ return this.page.getByRole('button', { name: 'Full Screen' });
+ }
}
--
GitLab