CB-5437 use flex component instead of container

webapp/packages/core-blocks/src/Flex/Flex.module.css

@@ -0,0 +1,96 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+.flex {
+  display: flex;
+  flex: 1 1 100%;
+}
+
+.overflow {
+  overflow: auto;
+}
+
+.gapXs {
+  gap: 8px;
+}
+
+.gapMd {
+  gap: 16px;
+}
+
+.gapLg {
+  gap: 24px;
+}
+
+.wrapWrap {
+  flex-wrap: wrap;
+}
+
+.wrapNoWrap {
+  flex-wrap: nowrap;
+}
+
+.wrapWrapReverse {
+  flex-wrap: wrap-reverse;
+}
+
+.directionRow {
+  flex-direction: row;
+}
+
+.directionColumn {
+  flex-direction: column;
+}
+
+.directionRowReverse {
+  flex-direction: row-reverse;
+}
+
+.directionColumnReverse {
+  flex-direction: column-reverse;
+}
+
+.alignStart {
+  align-items: flex-start;
+}
+
+.alignCenter {
+  align-items: center;
+}
+
+.alignEnd {
+  align-items: flex-end;
+}
+
+.alignStretch {
+  align-items: stretch;
+}
+
+.justifyStart {
+  justify-content: flex-start;
+}
+
+.justifyCenter {
+  justify-content: center;
+}
+
+.justifyEnd {
+  justify-content: flex-end;
+}
+
+.justifySpaceBetween {
+  justify-content: space-between;
+}
+
+.justifySpaceAround {
+  justify-content: space-around;
+}
+
+.justifySpaceEvenly {
+  justify-content: space-evenly;
+}

webapp/packages/core-blocks/src/Flex/Flex.tsx

@@ -0,0 +1,80 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+import { forwardRef } from 'react';
+
+import { clsx } from '@cloudbeaver/core-utils';
+
+import classes from './Flex.module.css';
+
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+  overflow?: boolean;
+  gap?: 'xs' | 'md' | 'lg';
+  wrap?: React.CSSProperties['flexWrap'];
+  direction?: React.CSSProperties['flexDirection'];
+  align?: React.CSSProperties['alignItems'];
+  justify?: React.CSSProperties['justifyContent'];
+}
+
+const gapClasses: Record<string, string> = {
+  xs: classes.gapXs,
+  md: classes.gapMd,
+  lg: classes.gapLg,
+};
+
+const wrapClasses: Record<string, string> = {
+  wrap: classes.wrapWrap,
+  nowrap: classes.wrapNoWrap,
+  'wrap-reverse': classes.wrapWrapReverse,
+};
+
+const directionClasses: Record<string, string> = {
+  row: classes.directionRow,
+  column: classes.directionColumn,
+  'row-reverse': classes.directionRowReverse,
+  'column-reverse': classes.directionColumnReverse,
+};
+
+const alignClasses: Record<string, string> = {
+  'flex-start': classes.alignStart,
+  center: classes.alignCenter,
+  'flex-end': classes.alignEnd,
+  stretch: classes.alignStretch,
+};
+
+const justifyClasses: Record<string, string> = {
+  'flex-start': classes.justifyStart,
+  center: classes.justifyCenter,
+  'flex-end': classes.justifyEnd,
+  'space-between': classes.justifySpaceBetween,
+  'space-around': classes.justifySpaceAround,
+  'space-evenly': classes.justifySpaceEvenly,
+};
+
+export const Flex = forwardRef<HTMLDivElement, Props>(function Flex(
+  { overflow, gap, wrap, direction, align, justify, className, children, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      {...rest}
+      className={clsx(
+        classes.flex,
+        overflow && classes.overflow,
+        gap && gapClasses[gap],
+        wrap && wrapClasses[wrap],
+        direction && directionClasses[direction],
+        align && alignClasses[align],
+        justify && justifyClasses[justify],
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+});

webapp/packages/core-blocks/src/index.ts

@@ -250,3 +250,4 @@ export * from './manifest';
 export * from './importLazyComponent';
 export * from './ClickableLoader';
 export * from './FormControls/TagsComboboxLoader';
+export * from './Flex/Flex';

webapp/packages/plugin-resource-manager-scripts/src/ResourceManagerScripts.tsx

@@ -7,7 +7,7 @@
  */
 import { observer } from 'mobx-react-lite';
 
-import { Container, useTranslate } from '@cloudbeaver/core-blocks';
+import { Flex, useTranslate } from '@cloudbeaver/core-blocks';
 import type { TabContainerPanelComponent } from '@cloudbeaver/core-ui';
 import { ResourceManagerTree } from '@cloudbeaver/plugin-navigation-tree-rm';
 
@@ -17,10 +17,10 @@ export const ResourceManagerScripts: TabContainerPanelComponent = observer(funct
   const translate = useTranslate();
 
   return (
-    <Container vertical overflow>
+    <Flex direction="column" overflow>
       <ResourceManagerTree resourceTypeId={SCRIPTS_TYPE_ID}>
         {translate('plugin_resource_manager_scripts_no_resources_placeholder')}
       </ResourceManagerTree>
-    </Container>
+    </Flex>
   );
 });