diff --git a/webapp/packages/core-ui/src/Tabs/Tab/Tab.tsx b/webapp/packages/core-ui/src/Tabs/Tab/Tab.tsx index 821670cab8..ce31bec714 100644 --- a/webapp/packages/core-ui/src/Tabs/Tab/Tab.tsx +++ b/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(function Tab({ tabId, title, menuContext, disabled, className, children, style, onOpen, onClose, onClick }) { +export const Tab = observer(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(function Tab({ tabId, title, menuContext, disabled={disabled} onClick={tab.handleOpen} > - {children} + {children} diff --git a/webapp/packages/core-ui/src/Tabs/Tab/TabProps.ts b/webapp/packages/core-ui/src/Tabs/Tab/TabProps.ts index f9b36d7072..53e1ed71c5 100644 --- a/webapp/packages/core-ui/src/Tabs/Tab/TabProps.ts +++ b/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) => void; onClose?: (tab: ITabData) => void; diff --git a/webapp/packages/plugin-version-update-administration/src/VersionUpdateDrawerItem.m.css b/webapp/packages/plugin-version-update-administration/src/VersionUpdateDrawerItem.m.css new file mode 100644 index 0000000000..9e91ad5c19 --- /dev/null +++ b/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; +} diff --git a/webapp/packages/plugin-version-update-administration/src/VersionUpdateDrawerItem.tsx b/webapp/packages/plugin-version-update-administration/src/VersionUpdateDrawerItem.tsx index 564034c548..e0288e7c81 100644 --- a/webapp/packages/plugin-version-update-administration/src/VersionUpdateDrawerItem.tsx +++ b/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(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))( - onSelect(item.name)}> - - + return styled(useStyles(style))( + onSelect(item.name)} + > + + - {versionUpdateService.newVersionAvailable && } + {versionUpdateService.newVersionAvailable && ( +
+ )} , ); });