CB-5437 use flex component instead of container (#2818)

* CB-5437 use flex component instead of container

* CB-5437 use data attributes to apply styles

* CB-5437 simplify logic

---------

Co-authored-by: Daria Marutkina <[email protected]>

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

@@ -0,0 +1,100 @@
+/*
+ * 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;
+  }
+
+  &[data-s-gap='xs'] {
+    gap: 8px;
+  }
+
+  &[data-s-gap='md'] {
+    gap: 16px;
+  }
+
+  &[data-s-gap='lg'] {
+    gap: 24px;
+  }
+
+  &[data-s-wrap='wrap'] {
+    flex-wrap: wrap;
+  }
+
+  &[data-s-wrap='nowrap'] {
+    flex-wrap: nowrap;
+  }
+
+  &[data-s-wrap='wrap-reverse'] {
+    flex-wrap: wrap-reverse;
+  }
+
+  &[data-s-direction='row'] {
+    flex-direction: row;
+  }
+
+  &[data-s-direction='column'] {
+    flex-direction: column;
+  }
+
+  &[data-s-direction='row-reverse'] {
+    flex-direction: row-reverse;
+  }
+
+  &[data-s-direction='column-reverse'] {
+    flex-direction: column-reverse;
+  }
+
+  &[data-s-align='start'] {
+    align-items: flex-start;
+  }
+
+  &[data-s-align='center'] {
+    align-items: center;
+  }
+
+  &[data-s-align='end'] {
+    align-items: flex-end;
+  }
+
+  &[data-s-align='stretch'] {
+    align-items: stretch;
+  }
+
+  &[data-s-justify='start'] {
+    justify-content: flex-start;
+  }
+
+  &[data-s-justify='center'] {
+    justify-content: center;
+  }
+
+  &[data-s-justify='end'] {
+    justify-content: flex-end;
+  }
+
+  &[data-s-justify='space-between'] {
+    justify-content: space-between;
+  }
+
+  &[data-s-justify='space-around'] {
+    justify-content: space-around;
+  }
+
+  &[data-s-justify='space-evenly'] {
+    justify-content: space-evenly;
+  }
+
+  &[data-s-justify='stretch'] {
+    justify-content: stretch;
+  }
+}

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

@@ -0,0 +1,40 @@
+/*
+ * 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 { s } from '../s';
+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'];
+}
+
+export const Flex = forwardRef<HTMLDivElement, Props>(function Flex(
+  { overflow, gap, wrap, direction, align, justify, className, children, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      {...rest}
+      className={s(classes, { flex: true, overflow }, className)}
+      data-s-gap={gap}
+      data-s-wrap={wrap}
+      data-s-direction={direction}
+      data-s-align={align}
+      data-s-justify={justify}
+    >
+      {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>
   );
 });