diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.tsx index 8ad7b824cd..de88956b0f 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.tsx +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.tsx @@ -17,6 +17,8 @@ import { import styles from './styles.module.scss' +const padding = parseInt(styles.paddingHorizontal) + export interface Props { items: Record; loading: boolean; @@ -61,38 +63,39 @@ const EnablementArea = ({ items, openScript, loading, onOpenInternalPage }: Prop }) } - const renderSwitch = (item: IEnablementAreaItem) => { + const renderSwitch = (item: IEnablementAreaItem, level: number) => { const { label, type, children, id, args } = item + const paddingsStyle = { paddingLeft: `${padding + level * 8}px`, paddingRight: `${padding}px` } switch (type) { case EnablementAreaComponent.Group: return ( - - {renderTreeView(Object.values(children || {}) || [])} + + {renderTreeView(Object.values(children || {}) || [], level + 1)} ) case EnablementAreaComponent.CodeButton: - return args?.path - ?
- :
openScript(args?.content || '')} label={label} {...args} />
+ return ( +
+ {args?.path + ? + : openScript(args?.content || '')} label={label} {...args} />} +
+ ) case EnablementAreaComponent.InternalLink: return ( - + {args?.content || label} ) default: - return {label}</PlainText> + return <PlainText style={paddingsStyle}>{label}</PlainText> } } - const renderTreeView = (elements: IEnablementAreaItem[]) => ( + const renderTreeView = (elements: IEnablementAreaItem[], level: number = 0) => ( elements?.map((item) => ( <div className="fluid" key={item.id}> - {renderSwitch(item)} + {renderSwitch(item, level)} </div> ))) diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/Group.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/Group.tsx index 3792200759..a8d283efd5 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/Group.tsx +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/Group.tsx @@ -11,16 +11,30 @@ export interface Props { forceState?: 'open' | 'closed'; arrowDisplay?: 'left' | 'right' | 'none'; onToggle?: (isOpen: boolean) => void; + triggerStyle?: any, } const Group = (props: Props) => { - const { label, children, testId, forceState, withBorder = false, arrowDisplay = 'right', initialIsOpen = false, onToggle } = props + const { + label, + children, + testId, + forceState, + withBorder = false, + arrowDisplay = 'right', + initialIsOpen = false, + onToggle, + triggerStyle, + } = props const buttonContent = ( <EuiText className="group-header" size="m"> {label} </EuiText> ) - const buttonProps: any = { 'data-testid': `accordion-button-${testId}` } + const buttonProps: any = { + 'data-testid': `accordion-button-${testId}`, + style: triggerStyle, + } return ( <EuiAccordion @@ -35,7 +49,10 @@ const Group = (props: Props) => { style={{ whiteSpace: 'nowrap', width: 'auto' }} className={[withBorder ? 'withBorder' : ''].join(' ')} > - {children} + <> + {children} + {withBorder && <div style={triggerStyle} className="divider"><hr /></div> } + </> </EuiAccordion> ) } diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/styles.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/styles.scss index 55abe960dd..39c2c212d7 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/styles.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/styles.scss @@ -10,17 +10,33 @@ white-space: nowrap; text-overflow: ellipsis; } + .divider { + visibility: hidden; + width: 100%; + height: 1px; + position: absolute; + bottom: 0; + hr { + border: none; + height: 1px; + width: 100%; + background-color: var(--separatorColor); + } + } } .euiAccordion__button { padding: 3px 0; & > span { overflow: hidden; } + &:hover { + background-color: var(--hoverInListColorDarken); + } } .euiAccordion-isOpen { min-width: 100%; - &.withBorder { - border-color: var(--separatorColor); + .divider { + visibility: visible; } } .euiAccordion__triggerWrapper, .euiAccordion__childWrapper { @@ -28,8 +44,8 @@ background-color: transparent !important; } .euiAccordion__childWrapper { - padding-left: 8px; - margin-bottom: 4px; + padding-left: 0; + margin-bottom: 8px; .euiListGroupItem { button { padding: 3px 8px; diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalLink/InternalLink.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalLink/InternalLink.tsx index 4d03fa8a2c..a4a9a17642 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalLink/InternalLink.tsx +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalLink/InternalLink.tsx @@ -15,9 +15,10 @@ export interface Props { iconType?: string; iconPosition?: 'left' | 'right'; toolTip?: string; + style?: any; } const InternalLink = (props: Props) => { - const { label, testId, children, path = '', size = 's', iconType, iconPosition = 'left', toolTip } = props + const { label, testId, children, path = '', size = 's', iconType, iconPosition = 'left', toolTip, ...rest } = props const { openPage } = useContext(EnablementAreaContext) const handleOpenPage = () => { if (path) { @@ -43,6 +44,7 @@ const InternalLink = (props: Props) => { color="subdued" onClick={handleOpenPage} label={content} + {...rest} /> ) } diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/PlainText/PlainText.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/PlainText/PlainText.tsx index 6d0472a08e..12d678f912 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/PlainText/PlainText.tsx +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/PlainText/PlainText.tsx @@ -3,10 +3,11 @@ import { EuiText } from '@elastic/eui' export interface Props { children: React.ReactElement | string; + style?: any; } -const PlainText = ({ children }: Props) => ( +const PlainText = ({ children, ...rest }: Props) => ( <EuiText - style={{ whiteSpace: 'nowrap', width: 'auto' }} + style={{ whiteSpace: 'nowrap', width: 'auto', ...rest.style }} color="subdued" size="m" > diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/styles.module.scss index 2354a68ea8..cacfe4539c 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/styles.module.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/styles.module.scss @@ -2,11 +2,9 @@ @import '@elastic/eui/src/components/table/mixins'; @import '@elastic/eui/src/global_styling/index'; -$paddingHorizontal: 18px; .container { overflow: hidden; height: 100%; - padding: 0 $paddingHorizontal; flex-grow: 1; } @@ -26,12 +24,16 @@ $paddingHorizontal: 18px; position: absolute; top: 0; height: 100%; - transform: translateX(calc(100% + 8px)); + transform: translateX(calc(100% + 18px)); backface-visibility: hidden; transition: transform 0.4s ease-in-out; box-shadow: -5px 1px 10px rgba(0, 0, 0, 0.2); } .internalPageVisible { - transform: translateX(-$paddingHorizontal); + transform: translateX(0); +} + +:export { + paddingHorizontal: 18 }