From 90f6a4dd1c7bf5f76840f442f14ebd3844352d5c Mon Sep 17 00:00:00 2001 From: Necla Akalin Date: Thu, 10 Oct 2024 22:28:19 +0100 Subject: [PATCH 1/5] adding advertisement tile for the new browser ui --- src/browser/images/clusters.svg | 35 ++++++++ src/browser/index.tsx | 17 +++- src/browser/modules/Carousel/style.less | 12 +++ src/browser/modules/Carousel/styled.tsx | 12 +++ src/browser/modules/Stream/PlayFrame.tsx | 25 ++++-- .../modules/Stream/StartPreviewFrame.tsx | 87 +++++++++++++++++++ .../experimentalFeaturesDuck.ts | 7 ++ 7 files changed, 189 insertions(+), 6 deletions(-) create mode 100644 src/browser/images/clusters.svg create mode 100644 src/browser/modules/Stream/StartPreviewFrame.tsx diff --git a/src/browser/images/clusters.svg b/src/browser/images/clusters.svg new file mode 100644 index 00000000000..41cbf1e7c22 --- /dev/null +++ b/src/browser/images/clusters.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/browser/index.tsx b/src/browser/index.tsx index f1b4154ec34..b88bb1a01dd 100644 --- a/src/browser/index.tsx +++ b/src/browser/index.tsx @@ -24,4 +24,19 @@ import AppInit, { setupSentry } from './AppInit' import './init' setupSentry() -ReactDOM.render(, document.getElementById('mount')) +;(async () => { + const doesPreferQuery = localStorage.getItem('prefersOldBrowser') === 'false' + + const response = await fetch('/preview/manifest.json') + if (response.status === 200) { + if (doesPreferQuery) { + window.location.pathname = '/preview/' + } else { + localStorage.setItem('previewAvailable', 'true') + } + } else { + localStorage.setItem('previewAvailable', 'false') + } + + ReactDOM.render(, document.getElementById('mount')) +})() diff --git a/src/browser/modules/Carousel/style.less b/src/browser/modules/Carousel/style.less index e7acde46805..36aed3e1c09 100644 --- a/src/browser/modules/Carousel/style.less +++ b/src/browser/modules/Carousel/style.less @@ -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; diff --git a/src/browser/modules/Carousel/styled.tsx b/src/browser/modules/Carousel/styled.tsx index 425ed629fca..781ecf53ba1 100644 --- a/src/browser/modules/Carousel/styled.tsx +++ b/src/browser/modules/Carousel/styled.tsx @@ -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}; } diff --git a/src/browser/modules/Stream/PlayFrame.tsx b/src/browser/modules/Stream/PlayFrame.tsx index 99e2f163570..de8ce1f0857 100644 --- a/src/browser/modules/Stream/PlayFrame.tsx +++ b/src/browser/modules/Stream/PlayFrame.tsx @@ -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) @@ -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(null) @@ -123,7 +130,8 @@ export function PlayFrame({ bus, onSlide, initialPlay, - showPromotion + showPromotion, + isAdvertiseFlagOn ) if (stillMounted) { setInitialPlay(false) @@ -206,7 +214,8 @@ function generateContent( bus: Bus, onSlide: any, shouldUseSlidePointer: boolean, - showPromotion = false + showPromotion = false, + isAdvertiseFlagOn: boolean ): Content | Promise { // Not found if (stackFrame.response && stackFrame.response.status === 404) { @@ -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 ? : content} + ) : showAdvertiseTile ? ( + ) : ( content ) @@ -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)) diff --git a/src/browser/modules/Stream/StartPreviewFrame.tsx b/src/browser/modules/Stream/StartPreviewFrame.tsx new file mode 100644 index 00000000000..9742752462d --- /dev/null +++ b/src/browser/modules/Stream/StartPreviewFrame.tsx @@ -0,0 +1,87 @@ +/* + * Copyright (c) "Neo4j" + * Neo4j Sweden AB [http://neo4j.com] + * + * This file is part of Neo4j. + * + * Neo4j is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ +import React from 'react' + +export const PreviewFrame = () => { + return ( + <> +
+
+ +

Discover the new Browser experience! ✨

+

+ Take a tour of our redesigned interface, built for faster navigation + and ease of use. +

+ +
+ +
+

Try Neo4j with live data

+

+ A complete example graph that demonstrates common query patterns. +

+
+

Actors & movies in cross-referenced pop culture.

+
+
+ +
+
+

Cypher basics

+

Intro to Graphs with Cypher

+ +
    +
  • What is a graph database?
    • +
  • How can I query a graph?
    • +
+
+ +
+
+ + + ) +} diff --git a/src/shared/modules/experimentalFeatures/experimentalFeaturesDuck.ts b/src/shared/modules/experimentalFeatures/experimentalFeaturesDuck.ts index 28ef59fc17e..91f36979417 100644 --- a/src/shared/modules/experimentalFeatures/experimentalFeaturesDuck.ts +++ b/src/shared/modules/experimentalFeatures/experimentalFeaturesDuck.ts @@ -9,6 +9,7 @@ export const showFeature = (state: any, name: any) => !!(state[NAME][name] || {}).on export const experimentalFeatureSelfName = 'showSelf' +export const experimentalFeaturePreviewName = 'advertisePreview' export const initialState = { [experimentalFeatureSelfName]: { @@ -16,6 +17,12 @@ export const initialState = { on: true, displayName: 'Show experimental features', tooltip: 'Show feature section in settings drawer' + }, + [experimentalFeaturePreviewName]: { + name: experimentalFeaturePreviewName, + on: false, + displayName: 'Advertise preview of new browser', + tooltip: 'Enable the advertisement tile of the new browser' } } From b304944b9eb9519ceb19e1405f365d340b9b57e1 Mon Sep 17 00:00:00 2001 From: Necla Akalin Date: Fri, 11 Oct 2024 13:10:49 +0100 Subject: [PATCH 2/5] fixing the navigation to preview --- src/browser/index.tsx | 18 +++++++++------ src/browser/modules/Stream/PlayFrame.tsx | 22 +++++-------------- .../modules/Stream/StartPreviewFrame.tsx | 18 ++++++++------- .../experimentalFeaturesDuck.ts | 7 ------ 4 files changed, 27 insertions(+), 38 deletions(-) diff --git a/src/browser/index.tsx b/src/browser/index.tsx index b88bb1a01dd..89aa5244229 100644 --- a/src/browser/index.tsx +++ b/src/browser/index.tsx @@ -22,19 +22,23 @@ import ReactDOM from 'react-dom' import AppInit, { setupSentry } from './AppInit' import './init' +import { navigateToPreview } from './modules/Stream/StartPreviewFrame' setupSentry() ;(async () => { const doesPreferQuery = localStorage.getItem('prefersOldBrowser') === 'false' - - const response = await fetch('/preview/manifest.json') - if (response.status === 200) { - if (doesPreferQuery) { - window.location.pathname = '/preview/' + try { + const response = await fetch('./preview/manifest.json') + if (response.status === 200) { + if (doesPreferQuery) { + navigateToPreview() + } else { + localStorage.setItem('previewAvailable', 'true') + } } else { - localStorage.setItem('previewAvailable', 'true') + localStorage.setItem('previewAvailable', 'false') } - } else { + } catch (e) { localStorage.setItem('previewAvailable', 'false') } diff --git a/src/browser/modules/Stream/PlayFrame.tsx b/src/browser/modules/Stream/PlayFrame.tsx index de8ce1f0857..52ce627ce84 100644 --- a/src/browser/modules/Stream/PlayFrame.tsx +++ b/src/browser/modules/Stream/PlayFrame.tsx @@ -48,10 +48,6 @@ 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) @@ -93,15 +89,13 @@ type PlayFrameProps = { showPromotion: boolean isFullscreen: boolean isCollapsed: boolean - isAdvertiseFlagOn: boolean } export function PlayFrame({ stack, bus, showPromotion, isFullscreen, - isCollapsed, - isAdvertiseFlagOn + isCollapsed }: PlayFrameProps): JSX.Element { const [stackIndex, setStackIndex] = useState(0) const [atSlideStart, setAtSlideStart] = useState(null) @@ -130,8 +124,7 @@ export function PlayFrame({ bus, onSlide, initialPlay, - showPromotion, - isAdvertiseFlagOn + showPromotion ) if (stillMounted) { setInitialPlay(false) @@ -214,8 +207,7 @@ function generateContent( bus: Bus, onSlide: any, shouldUseSlidePointer: boolean, - showPromotion = false, - isAdvertiseFlagOn: boolean + showPromotion = false ): Content | Promise { // Not found if (stackFrame.response && stackFrame.response.status === 404) { @@ -298,17 +290,16 @@ function generateContent( 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 ? ( <> - {showAdvertiseTile ? : content} + {isPreviewAvailable ? : content} - ) : showAdvertiseTile ? ( + ) : isPreviewAvailable ? ( ) : ( content @@ -392,8 +383,7 @@ const mapStateToProps = (state: GlobalState) => ({ (getEdition(state) !== null && !isEnterprise(state) && !isConnectedAuraHost(state)) || - inDesktop(state), - isAdvertiseFlagOn: showFeature(state, experimentalFeaturePreviewName) + inDesktop(state) }) export default connect(mapStateToProps)(withBus(PlayFrame)) diff --git a/src/browser/modules/Stream/StartPreviewFrame.tsx b/src/browser/modules/Stream/StartPreviewFrame.tsx index 9742752462d..bb3bb64f968 100644 --- a/src/browser/modules/Stream/StartPreviewFrame.tsx +++ b/src/browser/modules/Stream/StartPreviewFrame.tsx @@ -19,6 +19,13 @@ */ import React from 'react' +export const navigateToPreview = (): void => { + const path = window.location.pathname + if (!path.endsWith('/preview/')) { + window.location.pathname = `${path}${path.endsWith('/') ? '' : '/'}preview/` + } +} + export const PreviewFrame = () => { return ( <> @@ -27,15 +34,10 @@ export const PreviewFrame = () => {

Discover the new Browser experience! ✨

- Take a tour of our redesigned interface, built for faster navigation - and ease of use. + Switch to our redesigned interface, built for faster navigation and + ease of use.

-
diff --git a/src/shared/modules/experimentalFeatures/experimentalFeaturesDuck.ts b/src/shared/modules/experimentalFeatures/experimentalFeaturesDuck.ts index 91f36979417..28ef59fc17e 100644 --- a/src/shared/modules/experimentalFeatures/experimentalFeaturesDuck.ts +++ b/src/shared/modules/experimentalFeatures/experimentalFeaturesDuck.ts @@ -9,7 +9,6 @@ export const showFeature = (state: any, name: any) => !!(state[NAME][name] || {}).on export const experimentalFeatureSelfName = 'showSelf' -export const experimentalFeaturePreviewName = 'advertisePreview' export const initialState = { [experimentalFeatureSelfName]: { @@ -17,12 +16,6 @@ export const initialState = { on: true, displayName: 'Show experimental features', tooltip: 'Show feature section in settings drawer' - }, - [experimentalFeaturePreviewName]: { - name: experimentalFeaturePreviewName, - on: false, - displayName: 'Advertise preview of new browser', - tooltip: 'Enable the advertisement tile of the new browser' } } From 93dcfa132033e6f80dcda9a0d98a6ce85e647789 Mon Sep 17 00:00:00 2001 From: Necla Akalin Date: Fri, 11 Oct 2024 13:13:57 +0100 Subject: [PATCH 3/5] updating the snapshots --- .../Stream/__snapshots__/SchemaFrame.test.tsx.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/browser/modules/Stream/__snapshots__/SchemaFrame.test.tsx.snap b/src/browser/modules/Stream/__snapshots__/SchemaFrame.test.tsx.snap index 96c747d53b3..8d936b032fa 100644 --- a/src/browser/modules/Stream/__snapshots__/SchemaFrame.test.tsx.snap +++ b/src/browser/modules/Stream/__snapshots__/SchemaFrame.test.tsx.snap @@ -7,7 +7,7 @@ exports[`SchemaFrame renders empty 1`] = ` >
= 4.0 1`] = ` >
= 4.2 1`] = ` >
Date: Mon, 14 Oct 2024 11:27:34 +0100 Subject: [PATCH 4/5] updating the text in the neo4j browser --- src/browser/modules/Carousel/styled.tsx | 1 + src/browser/modules/Stream/StartPreviewFrame.tsx | 7 +++---- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/browser/modules/Carousel/styled.tsx b/src/browser/modules/Carousel/styled.tsx index 781ecf53ba1..625bc24d060 100644 --- a/src/browser/modules/Carousel/styled.tsx +++ b/src/browser/modules/Carousel/styled.tsx @@ -310,6 +310,7 @@ export const StyledSlide = styled.div` left: 0; bottom: -10px; opacity: 0.15; + pointer-events: none; } } diff --git a/src/browser/modules/Stream/StartPreviewFrame.tsx b/src/browser/modules/Stream/StartPreviewFrame.tsx index bb3bb64f968..e43569948a8 100644 --- a/src/browser/modules/Stream/StartPreviewFrame.tsx +++ b/src/browser/modules/Stream/StartPreviewFrame.tsx @@ -32,13 +32,12 @@ export const PreviewFrame = () => {
-

Discover the new Browser experience! ✨

+

🚀 Try the new Browser preview!

- Switch to our redesigned interface, built for faster navigation and - ease of use. + Switch to the preview experience to access all the latest features.

From d2bb86e00d94df0520418f79aa0746c6a0cb153f Mon Sep 17 00:00:00 2001 From: Necla Akalin Date: Mon, 14 Oct 2024 14:54:50 +0100 Subject: [PATCH 5/5] fixing the snapshot --- .../Stream/__snapshots__/SchemaFrame.test.tsx.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/browser/modules/Stream/__snapshots__/SchemaFrame.test.tsx.snap b/src/browser/modules/Stream/__snapshots__/SchemaFrame.test.tsx.snap index 8d936b032fa..47e2b0e7926 100644 --- a/src/browser/modules/Stream/__snapshots__/SchemaFrame.test.tsx.snap +++ b/src/browser/modules/Stream/__snapshots__/SchemaFrame.test.tsx.snap @@ -7,7 +7,7 @@ exports[`SchemaFrame renders empty 1`] = ` >
= 4.0 1`] = ` >
= 4.2 1`] = ` >