Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { recommendationsSelector, resetRecommendationsHighlighting } from 'uiSrc
import { InsightsPanelTabs } from 'uiSrc/slices/interfaces/insights'
import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
import { Pages } from 'uiSrc/constants'
import { removeFeatureFromHighlighting } from 'uiSrc/slices/app/features'
import InsightsTrigger from './InsightsTrigger'

let store: typeof mockedStore
Expand Down Expand Up @@ -49,7 +50,7 @@ describe('InsightsTrigger', () => {

fireEvent.click(screen.getByTestId('insights-trigger'))

expect(store.getActions()).toEqual([toggleInsightsPanel()])
expect(store.getActions()).toEqual([toggleInsightsPanel(), removeFeatureFromHighlighting('insights')])
})

it('should call proper actions after click on the button when there are any recommendations', () => {
Expand All @@ -63,7 +64,8 @@ describe('InsightsTrigger', () => {
expect(store.getActions()).toEqual([
resetRecommendationsHighlighting(),
changeSelectedTab(InsightsPanelTabs.Recommendations),
toggleInsightsPanel()
toggleInsightsPanel(),
removeFeatureFromHighlighting('insights')
])
})

Expand Down
59 changes: 37 additions & 22 deletions redisinsight/ui/src/components/insights-trigger/InsightsTrigger.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,20 @@ import { recommendationsSelector, resetRecommendationsHighlighting } from 'uiSrc
import { InsightsPanelTabs } from 'uiSrc/slices/interfaces/insights'
import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
import HighlightedFeature from 'uiSrc/components/hightlighted-feature/HighlightedFeature'
import { BUILD_FEATURES } from 'uiSrc/constants/featuresHighlighting'
import { appFeatureHighlightingSelector, removeFeatureFromHighlighting } from 'uiSrc/slices/app/features'
import { getHighlightingFeatures } from 'uiSrc/utils/highlighting'
import styles from './styles.module.scss'

const InsightsTrigger = () => {
const { isOpen: isInsigtsOpen, tabSelected } = useSelector(insightsPanelSelector)
const { isHighlighted, } = useSelector(recommendationsSelector)
const { provider } = useSelector(connectedInstanceSelector)

const { features } = useSelector(appFeatureHighlightingSelector)
const { insights: insightsHighlighting } = getHighlightingFeatures(features)

const dispatch = useDispatch()
const { pathname, search } = useLocation()
const { instanceId } = useParams<{ instanceId: string }>()
Expand Down Expand Up @@ -54,37 +61,45 @@ const InsightsTrigger = () => {
source: 'overview'
},
})

dispatch(removeFeatureFromHighlighting('insights'))
}

return (
<div
className={cx(styles.container, { [styles.isOpen]: isInsigtsOpen })}
>
<EuiToolTip
title={isHighlighted ? undefined : 'Insights'}
content={isHighlighted
? 'New tips are available'
: 'Open interactive tutorials to learn more about Redis or Redis Stack capabilities, or use tips to improve your database.'}
<HighlightedFeature
isHighlight={insightsHighlighting && !isHighlighted}
hideFirstChild={!isHighlighted}
{...(BUILD_FEATURES.insights || {})}
>
<EuiButton
fill
size="s"
color="secondary"
className={styles.btn}
role="button"
iconType={TriggerIcon}
onClick={handleClickTrigger}
data-testid="insights-trigger"
<EuiToolTip
title={isHighlighted ? undefined : 'Insights'}
content={isHighlighted
? 'New tips are available'
: 'Open interactive tutorials to learn more about Redis or Redis Stack capabilities, or use tips to improve your database.'}
>
<EuiText className={cx(
styles.triggerText,
)}
<EuiButton
fill
size="s"
color="secondary"
className={styles.btn}
role="button"
iconType={TriggerIcon}
onClick={handleClickTrigger}
data-testid="insights-trigger"
>
Insights
</EuiText>
{isHighlighted && (<span className={styles.highlighting} />)}
</EuiButton>
</EuiToolTip>
<EuiText className={cx(
styles.triggerText,
)}
>
Insights
</EuiText>
{isHighlighted && (<span className={styles.highlighting} />)}
</EuiButton>
</EuiToolTip>
</HighlightedFeature>
</div>
)
}
Expand Down
6 changes: 5 additions & 1 deletion redisinsight/ui/src/constants/featuresHighlighting.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,9 @@ interface BuildHighlightingFeature {
}

export const BUILD_FEATURES: Record<string, BuildHighlightingFeature> = {

insights: {
type: 'tooltip',
title: 'Try Redis Tutorials',
content: 'Try our interactive Tutorials to learn how Redis can solve your use cases.',
}
} as const