CB-3862: migrate folder-explorer to css-modules (#1979)

Co-authored-by: Daria Marutkina <125263541+dariamarutkina@users.noreply.github.com>

webapp/packages/core-blocks/src/FolderExplorer/FolderExplorerPath.m.css

@@ -0,0 +1,5 @@
+.folderExplorerPath {
+    composes: theme-typography--caption from global;
+    display: flex;
+    flex-wrap: wrap;
+}

webapp/packages/core-blocks/src/FolderExplorer/FolderExplorerPath.tsx

@@ -7,10 +7,11 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
-import styled from 'reshadow';
 
+import { s } from '../s';
+import { useS } from '../useS';
 import { FolderExplorerContext } from './FolderExplorerContext';
-import { folderExplorerStyles } from './folderExplorerStyles';
+import style from './FolderExplorerPath.m.css';
 import { FolderName } from './FolderName';
 
 interface Props {
@@ -20,6 +21,7 @@ interface Props {
 }
 
 export const FolderExplorerPath = observer<Props>(function FolderExplorerPath({ getName, canSkip, className }) {
+  const styles = useS(style);
   const context = useContext(FolderExplorerContext);
 
   if (!context) {
@@ -60,5 +62,5 @@ export const FolderExplorerPath = observer<Props>(function FolderExplorerPath({
     }
   }
 
-  return styled(folderExplorerStyles)(<folder-explorer-path className={className}>{pathElements}</folder-explorer-path>);
+  return <div className={s(styles, { folderExplorerPath: true }, className)}>{pathElements}</div>;
 });

webapp/packages/core-blocks/src/FolderExplorer/FolderName.m.css

@@ -0,0 +1,30 @@
+.path {
+    composes: theme-typography--caption from global;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.pathElement {
+    display: flex;
+    align-items: center;
+
+    &:first-child {
+        & .pathElementArrow {
+            display: none;
+        }
+    }
+}
+
+.pathElementArrow {
+    width: 16px;
+    height: 16px;
+    transform: rotate(-90deg);
+    opacity: 0.5;
+}
+
+.pathElementName {
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 4px;
+}

webapp/packages/core-blocks/src/FolderExplorer/FolderName.tsx

@@ -7,12 +7,13 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
-import styled from 'reshadow';
 
 import { Icon } from '../Icon';
 import { Link } from '../Link';
+import { s } from '../s';
+import { useS } from '../useS';
 import { FolderExplorerContext } from './FolderExplorerContext';
-import { folderExplorerStyles } from './folderExplorerStyles';
+import style from './FolderName.m.css';
 
 interface BaseProps {
   folder?: string;
@@ -36,6 +37,7 @@ interface ShortProps extends BaseProps {
 }
 
 export const FolderName = observer<FolderProps | ShortProps>(function FolderName({ folder, path, title, short, last, getName }) {
+  const styles = useS(style);
   const context = useContext(FolderExplorerContext);
 
   if (!context) {
@@ -57,14 +59,12 @@ export const FolderName = observer<FolderProps | ShortProps>(function FolderName
     path = path.slice(0, path.length - 1);
   }
 
-  return styled(folderExplorerStyles)(
-    <folder-explorer-path-element title={title || name}>
-      <folder-explorer-path-element-arrow>
+  return (
+    <div className={s(styles, { pathElement: true })} title={title || name}>
+      <div className={s(styles, { pathElementArrow: true })}>
         <Icon name="arrow" viewBox="0 0 16 16" />
-      </folder-explorer-path-element-arrow>
-      <folder-explorer-path-element-name>
-        {last ? name : <Link onClick={() => context.open(path, folder!)}>{name}</Link>}
-      </folder-explorer-path-element-name>
-    </folder-explorer-path-element>,
+      </div>
+      <div className={s(styles, { pathElementName: true })}>{last ? name : <Link onClick={() => context.open(path, folder!)}>{name}</Link>}</div>
+    </div>
   );
 });

webapp/packages/core-blocks/src/FolderExplorer/folderExplorerStyles.ts

@@ -1,39 +0,0 @@
-/*
- * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2023 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 { css } from 'reshadow';
-
-export const folderExplorerStyles = css`
-  folder-explorer-path {
-    composes: theme-typography--caption from global;
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  folder-explorer-path-element {
-    display: flex;
-    align-items: center;
-  }
-
-  folder-explorer-path-element-arrow {
-    width: 16px;
-    height: 16px;
-    transform: rotate(-90deg);
-    opacity: 0.5;
-  }
-
-  folder-explorer-path-element-name {
-    max-width: 150px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding: 0 4px;
-  }
-
-  folder-explorer-path-element:first-child folder-explorer-path-element-arrow {
-    display: none;
-  }
-`;

webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.m.css

@@ -0,0 +1,3 @@
+.folderExplorerPath {
+  padding: 0 4px 8px 4px;
+}

webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.tsx

@@ -8,6 +8,7 @@
 import { observer } from 'mobx-react-lite';
 import { useCallback, useMemo, useState } from 'react';
 import styled, { css, use } from 'reshadow';
+import elementsTreeStyles from './ElementsTree.m.css';
 
 import {
   EventTreeNodeClickFlag,
@@ -16,10 +17,12 @@ import {
   FolderExplorer,
   FolderExplorerPath,
   PlaceholderElement,
+  s,
   Translate,
   TREE_NODE_STYLES,
   TreeNodeNested,
   TreeNodeNestedMessage,
+  useS,
   useStyles,
 } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
@@ -43,7 +46,7 @@ import { useDropOutside } from './useDropOutside';
 import { IElementsTreeOptions, useElementsTree } from './useElementsTree';
 import { useElementsTreeFolderExplorer } from './useElementsTreeFolderExplorer';
 
-const styles = css`
+const oldStyles = css`
   box {
     display: flex;
     flex-direction: column;
@@ -75,10 +78,6 @@ const styles = css`
     max-width: 100%;
   }
 
-  FolderExplorerPath {
-    padding: 0 4px 8px 4px;
-  }
-
   drop-outside {
     composes: theme-border-color-background from global;
     border: dashed 2px;
@@ -143,6 +142,7 @@ export const ElementsTree = observer<ElementsTreeProps>(function ElementsTree({
   onSelect,
   onFilter,
 }) {
+  const styles = useS(elementsTreeStyles);
   const navTreeResource = useService(NavTreeResource);
   const navNodeInfoResource = useService(NavNodeInfoResource);
   const [treeRootRef, setTreeRootRef] = useState<HTMLDivElement | null>(null);
@@ -217,7 +217,7 @@ export const ElementsTree = observer<ElementsTreeProps>(function ElementsTree({
     tree.resetSelection();
   }
 
-  return styled(useStyles(TREE_NODE_STYLES, styles, style))(
+  return styled(useStyles(TREE_NODE_STYLES, oldStyles, style))(
     <>
       <ElementsTreeTools tree={tree} settingsElements={settingsElements} style={style} />
       <tree-box ref={setTreeRootRef} {...use({ big })}>
@@ -225,7 +225,9 @@ export const ElementsTree = observer<ElementsTreeProps>(function ElementsTree({
           <box className={className}>
             <FolderExplorer state={folderExplorer}>
               <tree ref={dropOutside.mouse.reference} onClick={handleClick}>
-                {settings?.showFolderExplorerPath && <FolderExplorerPath getName={getName} canSkip={canSkip} />}
+                {settings?.showFolderExplorerPath && (
+                  <FolderExplorerPath className={s(styles, { folderExplorerPath: true })} getName={getName} canSkip={canSkip} />
+                )}
                 <drop-outside
                   ref={dndBox.setRef}
                   {...use({