Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding advertisement tile for the new browser ui #1978

Merged
merged 5 commits into from
Oct 15, 2024
Merged

Adding advertisement tile for the new browser ui #1978

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
90f6a4d
adding advertisement tile for the new browser ui
nnecla Oct 10, 2024
b304944
fixing the navigation to preview
nnecla Oct 11, 2024
93dcfa1
updating the snapshots
nnecla Oct 11, 2024
40ee890
updating the text in the neo4j browser
nnecla Oct 14, 2024
d2bb86e
fixing the snapshot
nnecla Oct 14, 2024
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
35 changes: 35 additions & 0 deletions src/browser/images/clusters.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 16 additions & 1 deletion src/browser/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,19 @@ import AppInit, { setupSentry } from './AppInit'
import './init'

setupSentry()
ReactDOM.render(<AppInit />, document.getElementById('mount'))
;(async () => {
const doesPreferQuery = localStorage.getItem('prefersOldBrowser') === 'false'

const response = await fetch('/preview/manifest.json')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think fetch can throw, so I think it'd be good with try { } catch { } here

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This also needs to be fetch('./preview/manifest.json') to handle the bundled case where it's under /browser/preview. And also to handle if users have set up their own custom hosting!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perfect point, changed it accordingly!

if (response.status === 200) {
if (doesPreferQuery) {
window.location.pathname = '/preview/'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the bundled Browser case, the preview will be on http://localhost:7474/browser/preview and in the hosted case it's on browser.neo4j.io/preview.

So this would not work for bundled browser

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is so true. I've also realised while testing that switching back to browser removes the whole path, instead of just removing the preview(i remember i've tested it but probably did not test it appropriately :/ ) But I can create another pr to fix the query side.

Changed this one to add preview to the current path.

} else {
localStorage.setItem('previewAvailable', 'true')
}
} else {
localStorage.setItem('previewAvailable', 'false')
}

ReactDOM.render(<AppInit />, document.getElementById('mount'))
})()
12 changes: 12 additions & 0 deletions src/browser/modules/Carousel/style.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -345,6 +345,18 @@
border: 0;
display: inline-block;
}
.btn-advertise {
padding: 1em;
background-color: #fff;
color: #008cc1;
border-radius: 4px;
border: 0;
display: inline-block;
margin-bottom: 5px;
margin-right: 5px;
font-size: 12px;
line-height: 18px;
}
.teasers {
display: flex;
justify-content: center;
Expand Down
12 changes: 12 additions & 0 deletions src/browser/modules/Carousel/styled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -301,6 +301,18 @@ export const StyledSlide = styled.div`
background-color: ${props => props.theme.teaserCardBackground} !important;
}

&.slide .teaser-advertise {
color: white !important;
background-color: #0a6190 !important;

& .img-advertise {
position: absolute;
left: 0;
bottom: -10px;
opacity: 0.15;
}
}

&.slide input {
color: ${props => props.theme.inputText};
}
Expand Down
25 changes: 20 additions & 5 deletions src/browser/modules/Stream/PlayFrame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,11 @@ import { isConnectedAuraHost } from 'shared/modules/connections/connectionsDuck'
import { getEdition, isEnterprise } from 'shared/modules/dbMeta/dbMetaDuck'
import { DARK_THEME } from 'shared/modules/settings/settingsDuck'
import { LAST_GUIDE_SLIDE } from 'shared/modules/udc/udcDuck'
import { PreviewFrame } from './StartPreviewFrame'
import {
experimentalFeaturePreviewName,
showFeature
} from 'shared/modules/experimentalFeatures/experimentalFeaturesDuck'

const AuraPromotion = () => {
const theme = useContext(ThemeContext)
Expand Down Expand Up @@ -88,13 +93,15 @@ type PlayFrameProps = {
showPromotion: boolean
isFullscreen: boolean
isCollapsed: boolean
isAdvertiseFlagOn: boolean
}
export function PlayFrame({
stack,
bus,
showPromotion,
isFullscreen,
isCollapsed
isCollapsed,
isAdvertiseFlagOn
}: PlayFrameProps): JSX.Element {
const [stackIndex, setStackIndex] = useState(0)
const [atSlideStart, setAtSlideStart] = useState<boolean | null>(null)
Expand Down Expand Up @@ -123,7 +130,8 @@ export function PlayFrame({
bus,
onSlide,
initialPlay,
showPromotion
showPromotion,
isAdvertiseFlagOn
)
if (stillMounted) {
setInitialPlay(false)
Expand Down Expand Up @@ -206,7 +214,8 @@ function generateContent(
bus: Bus,
onSlide: any,
shouldUseSlidePointer: boolean,
showPromotion = false
showPromotion = false,
isAdvertiseFlagOn: boolean
): Content | Promise<Content> {
// Not found
if (stackFrame.response && stackFrame.response.status === 404) {
Expand Down Expand Up @@ -287,15 +296,20 @@ function generateContent(

// Check if content exists locally
if (isPlayChapter(guideName)) {
const isPreviewAvailable =
localStorage.getItem('previewAvailable') === 'true'
const showAdvertiseTile = isAdvertiseFlagOn && isPreviewAvailable
const { content, title, subtitle, slides = null } = chapters[guideName]

const isPlayStart = stackFrame.cmd.trim() === ':play start'
const updatedContent =
isPlayStart && showPromotion ? (
<>
{content}
{showAdvertiseTile ? <PreviewFrame /> : content}
<AuraPromotion />
</>
) : showAdvertiseTile ? (
<PreviewFrame />
) : (
content
)
Expand Down Expand Up @@ -378,7 +392,8 @@ const mapStateToProps = (state: GlobalState) => ({
(getEdition(state) !== null &&
!isEnterprise(state) &&
!isConnectedAuraHost(state)) ||
inDesktop(state)
inDesktop(state),
isAdvertiseFlagOn: showFeature(state, experimentalFeaturePreviewName)
})

export default connect(mapStateToProps)(withBus(PlayFrame))
Loading
Loading