CB-4417 version update drawer item to module styles

webapp/packages/core-ui/src/Tabs/Tab/Tab.tsx

@@ -25,7 +25,19 @@ import { MENU_TAB } from './MENU_TAB';
 import type { TabProps } from './TabProps';
 import { useTab } from './useTab';
 
-export const Tab = observer<TabProps>(function Tab({ tabId, title, menuContext, disabled, className, children, style, onOpen, onClose, onClick }) {
+export const Tab = observer<TabProps>(function Tab({
+  tabId,
+  title,
+  menuContext,
+  disabled,
+  className,
+  children,
+  style,
+  onOpen,
+  onClose,
+  onClick,
+  сontainerClassName,
+}) {
   const translate = useTranslate();
   const tabContext = useMemo(() => ({ tabId }), [tabId]);
   const tab = useTab(tabId, onOpen, onClose, onClick);
@@ -54,7 +66,7 @@ export const Tab = observer<TabProps>(function Tab({ tabId, title, menuContext,
             disabled={disabled}
             onClick={tab.handleOpen}
           >
-            <tab-container>{children}</tab-container>
+            <tab-container className={сontainerClassName}>{children}</tab-container>
           </BaseTab>
         </tab-inner>
       </tab-outer>

webapp/packages/core-ui/src/Tabs/Tab/TabProps.ts

@@ -19,6 +19,7 @@ export type TabProps = PropsWithChildren<{
   selected?: boolean;
   disabled?: boolean;
   className?: string;
+  сontainerClassName?: string;
   style?: ComponentStyle;
   onOpen?: (tab: ITabData<any>) => void;
   onClose?: (tab: ITabData<any>) => void;

webapp/packages/plugin-version-update-administration/src/VersionUpdateDrawerItem.m.css

@@ -0,0 +1,20 @@
+.tabContainer {
+  justify-content: space-between;
+}
+
+.tabTitle {
+  flex: 1;
+}
+
+.icon {
+  composes: theme-background-primary from global;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  margin-right: 12px;
+}
+
+.iconOrImage {
+  width: 16px;
+}

webapp/packages/plugin-version-update-administration/src/VersionUpdateDrawerItem.tsx

@@ -6,49 +6,40 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
+import styled from 'reshadow';
 
 import type { AdministrationItemDrawerProps } from '@cloudbeaver/core-administration';
-import { Translate, useResource, useStyles, useTranslate } from '@cloudbeaver/core-blocks';
+import { s, Translate, useResource, useS, useStyles, useTranslate } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { CachedMapAllKey } from '@cloudbeaver/core-resource';
 import { Tab, TabIcon, TabTitle } from '@cloudbeaver/core-ui';
 import { VersionResource } from '@cloudbeaver/core-version';
 import { VersionUpdateService } from '@cloudbeaver/core-version-update';
 
-const styles = css`
-  tab-container {
-    justify-content: space-between;
-  }
-  TabTitle {
-    flex: 1;
-  }
-  icon {
-    composes: theme-background-primary from global;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    flex-shrink: 0;
-    margin-right: 12px;
-  }
-  IconOrImage {
-    width: 16px;
-  }
-`;
+import styles from './VersionUpdateDrawerItem.m.css';
 
 export const VersionUpdateDrawerItem = observer<AdministrationItemDrawerProps>(function VersionUpdateDrawerItem({ item, onSelect, style, disabled }) {
   const translate = useTranslate();
   const versionUpdateService = useService(VersionUpdateService);
+  const moduleStyle = useS(styles);
 
   useResource(VersionUpdateDrawerItem, VersionResource, CachedMapAllKey, { silent: true });
 
-  return styled(useStyles(style, styles))(
-    <Tab tabId={item.name} disabled={disabled} title="version_update" style={styles} onOpen={() => onSelect(item.name)}>
-      <TabIcon icon="/icons/version_update.svg" />
-      <TabTitle>
+  return styled(useStyles(style))(
+    <Tab
+      сontainerClassName={s(moduleStyle, { tabContainer: true })}
+      tabId={item.name}
+      disabled={disabled}
+      title="version_update"
+      onOpen={() => onSelect(item.name)}
+    >
+      <TabIcon className={s(moduleStyle, { iconOrImage: true })} icon="/icons/version_update.svg" />
+      <TabTitle className={s(moduleStyle, { tabTitle: true })}>
         <Translate token="version_update" />
       </TabTitle>
-      {versionUpdateService.newVersionAvailable && <icon title={translate('version_update_new_version_available')} />}
+      {versionUpdateService.newVersionAvailable && (
+        <div className={s(moduleStyle, { icon: true })} title={translate('version_update_new_version_available')} />
+      )}
     </Tab>,
   );
 });