CB-4332 refactor: migrate some parts of application to css-modules (#2194)

* CB-4332 refactor: migrate some parts of application to css-modules

* CB-4332 fix: aria attribute name

* CB-4332 refactor: remove ADMINISTRATION_TOOLS_PANEL_STYLES

* CB-4332 fix: inputs

* CB-4332 fix: conflicts

* СИ-4396 fix: sql editor sync

---------

Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com>

webapp/packages/plugin-sql-editor/src/SqlEditor/ISQLEditorData.ts

@@ -66,4 +66,5 @@ export interface ISQLEditorData {
     passEmpty?: boolean,
     passDisabled?: boolean,
   ): Promise<T | undefined>;
+  setModeId(tabId: string): void;
 }

webapp/packages/plugin-sql-editor/src/SqlEditor/SqlEditor.tsx

@@ -71,7 +71,7 @@ export const SqlEditor = observer<ISqlEditorProps>(function SqlEditor({ state, c
   });
 
   function handleModeSelect(tab: ITabData<ISqlEditorModeProps>) {
-    state.currentModeId = tab.tabId;
+    data.setModeId(tab.tabId);
   }
 
   const displayedEditors = getComputed(() => sqlEditorModeService.tabsContainer.getDisplayed({ state, data }).length);

webapp/packages/plugin-sql-editor/src/SqlEditor/useSqlEditor.ts

@@ -462,6 +462,10 @@ export function useSqlEditor(state: ISqlEditorTabState): ISQLEditorData {
 
         return query;
       },
+      setModeId(tabId: string): void {
+        this.state.currentModeId = tabId;
+        this.onUpdate.execute();
+      },
     }),
     {
       formatScript: action.bound,
@@ -529,6 +533,19 @@ export function useSqlEditor(state: ISqlEditorTabState): ISQLEditorData {
     ],
   });
 
+  useEffect(() => {
+    const subscription = autorun(() => {
+      const contexts = data.onMode.execute(data);
+      const activeSegmentMode = contexts.getContext(SQLEditorModeContext);
+
+      action(() => {
+        data.activeSegmentMode = activeSegmentMode;
+      });
+    });
+
+    return subscription;
+  }, [data]);
+
   useEffect(() => () => data.destruct(), []);
 
   return data;

webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogsPanel.tsx

@@ -7,7 +7,7 @@
  */
 import { observer } from 'mobx-react-lite';
 
-import { Container, useResource } from '@cloudbeaver/core-blocks';
+import { Container, Group, useResource } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { EditorLoader } from '@cloudbeaver/plugin-codemirror6';
 
@@ -32,7 +32,7 @@ export const OutputLogsPanel = observer<Props>(function SqlOutputLogsPanel({ sql
     <Container className="theme-background-secondary" overflow vertical noWrap dense parent gap>
       <OutputLogsToolbar state={state} sqlEditorTabState={sqlEditorTabState} />
       {data && (
-        <Container overflow>
+        <Group box>
           <EditorLoader
             value={state.resultValue}
             foldGutter={false}
@@ -40,7 +40,7 @@ export const OutputLogsPanel = observer<Props>(function SqlOutputLogsPanel({ sql
             highlightActiveLine={false}
             readonly
           />
-        </Container>
+        </Group>
       )}
     </Container>
   );

webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogsToolbar.m.css

@@ -1,6 +0,0 @@
-.searchIcon {
-  width: 24px;
-  height: 24px;
-  display: flex;
-  border-radius: var(--theme-menu-bar-small-action-radius);
-}

webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogsToolbar.tsx

@@ -8,11 +8,10 @@
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
-import { Container, Icon, InputField, s, useS, useTranslate } from '@cloudbeaver/core-blocks';
+import { Container, Filter, useTranslate } from '@cloudbeaver/core-blocks';
 
 import type { ISqlEditorTabState } from '../../ISqlEditorTabState';
 import { OutputLogsMenu } from './OutputLogsMenu';
-import style from './OutputLogsToolbar.m.css';
 import type { SqlOutputLogsPanelState } from './useOutputLogsPanelState';
 
 interface Props {
@@ -21,20 +20,14 @@ interface Props {
 }
 
 export const OutputLogsToolbar = observer<Props>(function OutputLogsToolbar({ state, sqlEditorTabState }) {
-  const styles = useS(style);
   const translate = useTranslate();
 
   return (
     <Container noWrap center gap dense keepSize>
-      <InputField
+      <Filter
         value={state.searchValue}
         placeholder={translate('sql_editor_output_logs_input_placeholder')}
-        icon={
-          <div className={s(styles, { searchIcon: true })}>
-            <Icon name="search" viewBox="0 0 24 24" />
-          </div>
-        }
-        fill
+        max
         onChange={value => state.setSearchValue(value.toString())}
       />
       <Container keepSize>