CB-4266 DataSynchronizationNotification fixed size

webapp/packages/plugin-root/src/DataSynchronization/DataSynchronizationNotification.m.css

@@ -0,0 +1,14 @@
+.wrapper {
+  height: 176px;
+}
+
+.message {
+  composes: theme-typography--caption from global;
+  opacity: 0.8;
+  overflow: auto;
+  max-height: 100px;
+  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}

webapp/packages/plugin-root/src/DataSynchronization/DataSynchronizationNotification.tsx

@@ -6,41 +6,20 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
-import { Button, SnackbarBody, SnackbarContent, SnackbarFooter, SnackbarStatus, SnackbarWrapper, useTranslate } from '@cloudbeaver/core-blocks';
+import { Button, SnackbarBody, SnackbarContent, SnackbarFooter, SnackbarStatus, SnackbarWrapper, s, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { ENotificationType, NotificationComponentProps } from '@cloudbeaver/core-events';
 import { DataSynchronizationService } from '@cloudbeaver/core-root';
-import { groupBy, objectValues, uniq } from '@cloudbeaver/core-utils';
-
-const styles = css`
-  message {
-    composes: theme-typography--caption from global;
-    opacity: 0.8;
-    overflow: auto;
-    max-height: 100px;
-    margin-top: 8px;
-
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-
-    & > div {
-      word-break: break-word;
-      white-space: pre-line;
-    }
-
-    &:empty {
-      display: none;
-    }
-  }
-`;
+import { groupBy, objectValues } from '@cloudbeaver/core-utils';
+import { DataSynchronizationNotificationMessages } from './DataSynchronizationNotificationMessages';
+import styles from './DataSynchronizationNotification.m.css';
 
 export const DataSynchronizationNotification = observer<NotificationComponentProps>(function DataSynchronizationNotification({ notification }) {
   const dataSynchronizationService = useService(DataSynchronizationService);
   const translate = useTranslate();
   const groups = objectValues(groupBy(Array.from(dataSynchronizationService.queue.values()), message => message.label));
+  const style = useS(styles);
 
   function applyChanges() {
     dataSynchronizationService.resolveAll(true);
@@ -51,18 +30,14 @@ export const DataSynchronizationNotification = observer<NotificationComponentPro
     notification.close(false);
   }
 
-  return styled(styles)(
-    <SnackbarWrapper onClose={ignoreChanges}>
+  return (
+    <SnackbarWrapper className={s(style, { wrapper: true })} onClose={ignoreChanges}>
       <SnackbarStatus status={ENotificationType.Info} />
       <SnackbarContent>
         <SnackbarBody title={translate(notification.title)}>
           {notification.message && translate(notification.message)}
-          <message>
-            {groups.map(messages => {
-              const message = uniq(messages.map(m => translate(m.message))).join('\n');
-
-              return <div key={messages[0].label}>{message}</div>;
-            })}
+          <message className={s(style, { message: true })}>
+            {groups.map((messages, index) => <DataSynchronizationNotificationMessages key={index} messages={messages} />)}
           </message>
         </SnackbarBody>
         <SnackbarFooter timestamp={notification.timestamp}>
@@ -74,6 +49,6 @@ export const DataSynchronizationNotification = observer<NotificationComponentPro
           </Button>
         </SnackbarFooter>
       </SnackbarContent>
-    </SnackbarWrapper>,
+    </SnackbarWrapper>
   );
 });

webapp/packages/plugin-root/src/DataSynchronization/DataSynchronizationNotificationMessages.m.css

@@ -0,0 +1,8 @@
+.messageContent {
+  word-break: break-word;
+  white-space: pre-line;
+}
+
+.messageContent:empty {
+  display: none;
+}

webapp/packages/plugin-root/src/DataSynchronization/DataSynchronizationNotificationMessages.tsx

@@ -0,0 +1,17 @@
+import { s, useS, useTranslate } from '@cloudbeaver/core-blocks';
+import type { ISynchronizationMessage } from '@cloudbeaver/core-root';
+import { uniq } from '@cloudbeaver/core-utils';
+import { observer } from 'mobx-react-lite';
+import styles from './DataSynchronizationNotificationMessages.m.css';
+
+type DataSynchronizationNotificationMessagesProps = {
+  messages: ISynchronizationMessage[];
+};
+
+export const DataSynchronizationNotificationMessages = observer<DataSynchronizationNotificationMessagesProps>(function DataSynchronizationNotificationMessages({ messages }) {
+  const translate = useTranslate();
+  const message = uniq(messages.map(m => translate(m.message))).join('\n');
+  const style = useS(styles);
+
+  return <div key={messages[0].label} className={s(style, { messageContent: true })}>{message}</div>;
+});