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

Playground Layout: Put visitor ID in Identification column #148

Merged
merged 20 commits into from
Jul 15, 2024
Merged

Playground Layout: Put visitor ID in Identification column #148

Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
5d563ca
feat: external link animation
JuroUhlar Jul 10, 2024
765f634
feat: custom spinner
JuroUhlar Jul 10, 2024
c45ec65
feat: running intelligence animation
JuroUhlar Jul 10, 2024
60c45fe
fix: move refresh button to the top
JuroUhlar Jul 10, 2024
424c338
feat: add remote control smart signal
JuroUhlar Jul 10, 2024
9d11e4b
feat: add velocity smart signal
JuroUhlar Jul 10, 2024
f2bd792
left align hero section on mobile
JuroUhlar Jul 10, 2024
422dce0
fix accordion color
JuroUhlar Jul 10, 2024
961c63b
fix build
JuroUhlar Jul 10, 2024
065b7fc
feat: use the same mapbox tiles as the main website
JuroUhlar Jul 10, 2024
c2eab89
ci: run check even when PR is not into main
JuroUhlar Jul 10, 2024
6e624f0
feat: put visitor ID box in the identification column
JuroUhlar Jul 11, 2024
0ef8408
fix mobile layout
JuroUhlar Jul 12, 2024
0c84d9a
Merge branch 'feat/playground-redesign' into simplify-layout
JuroUhlar Jul 12, 2024
7d00ad4
self-review: remove comments
JuroUhlar Jul 12, 2024
a4efefa
test: fix locator
JuroUhlar Jul 12, 2024
8187cd5
fix map z index
JuroUhlar Jul 15, 2024
0b5b9cc
fix: disable scroll restoration on playground
JuroUhlar Jul 15, 2024
000dd9a
feat: add table animations
JuroUhlar Jul 12, 2024
ba18928
fix: remove !important
JuroUhlar Jul 15, 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
2 changes: 1 addition & 1 deletion e2e/playground.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ test.beforeEach(async ({ page }) => {
test.describe('Playground page', () => {
test('Page renders basic skeleton elements', async ({ page }) => {
await page.getByText('Fingerprint Pro Playground', { exact: true }).waitFor();
await page.getByText('Welcome, this is your visitor ID').waitFor();
await page.getByText('Your Visitor ID is').waitFor();
await page.getByTestId(TEST_ID.refreshButton).first().waitFor();

await page.getByText('Identification', { exact: true }).waitFor();
Expand Down
203 changes: 108 additions & 95 deletions src/app/playground/Playground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client';

import { FunctionComponent } from 'react';
import { FunctionComponent, useEffect } from 'react';
import { CollapsibleJsonViewer } from '../../client/components/common/CodeSnippet/CodeSnippet';
import dynamic from 'next/dynamic';
import SignalTable, { TableCellData } from './components/SignalTable';
Expand Down Expand Up @@ -75,6 +75,13 @@ function Playground() {
serverError,
} = usePlaygroundSignals();

/**
* Prevent restoring scroll position on page refresh since there is nothing to scroll to while the data is being loaded
*/
useEffect(() => {
window.history.scrollRestoration = 'manual';
}, []);

if (agentError) {
return <Alert severity={'error'}>JavaScript Agent Error: {agentError.message}.</Alert>;
}
Expand Down Expand Up @@ -448,33 +455,25 @@ function Playground() {
</h1>
<p>Analyze your browser with Fingerprint Pro and see all the available signals.</p>
</Container>
{agentResponse && (
<Container size='large'>
<div className={styles.visitorIdBox}>
<p>Welcome, this is your visitor ID</p>
<h2 className={styles.visitorId}>{agentResponse?.visitorId}</h2>
</div>
</Container>
)}
{!cachedEvent ? (
<Container size='large'>
<div className={styles.runningIntelligence}>
<Spinner size={64} />
<Container size='large'>
<div className={styles.runningIntelligence}>
{!cachedEvent ? (
<h2>
Running Device Intelligence<span className={styles.blink}>_</span>
</h2>
</div>
</Container>
) : (
<>
<Container size='large'>
) : (
<RefreshButton
loading={isLoadingAgentResponse || isLoadingServerResponse}
getAgentData={getAgentData}
className={styles.reloadButton}
/>

<div className={styles.tablesContainer}>
)}
</div>
</Container>
<>
<Container size='large'>
<div className={styles.tablesContainer}>
{agentResponse ? (
<MyCollapsible defaultOpen>
<h3 className={styles.tableTitle}>
Identification{' '}
Expand All @@ -483,85 +482,99 @@ function Playground() {
</MyCollapsibleTrigger>
</h3>
<MyCollapsibleContent>
<SignalTable data={identificationSignals} />
</MyCollapsibleContent>
</MyCollapsible>
<div className={styles.visitorIdBox}>
<p>Your Visitor ID is </p>
<h2 className={styles.visitorId}>{agentResponse?.visitorId}</h2>
</div>

<MyCollapsible defaultOpen>
<h3 className={styles.tableTitle}>
Smart signals{' '}
<MyCollapsibleTrigger>
<ChevronSvg />
</MyCollapsibleTrigger>
</h3>
<MyCollapsibleContent>
<SignalTable data={smartSignals} />
</MyCollapsibleContent>
</MyCollapsible>
<MyCollapsible defaultOpen>
<h3 className={styles.tableTitle}>
Mobile Smart signals{' '}
<MyCollapsibleTrigger>
<ChevronSvg />
</MyCollapsibleTrigger>
</h3>
<MyCollapsibleContent>
<SignalTable data={mobileSmartSignals} />
<SignalTable data={identificationSignals} />
</MyCollapsibleContent>
</MyCollapsible>
</div>
</Container>

<Container size='large' className={styles.isSection}>
<h2 className={styles.sectionTitle}>How to use this demo</h2>
<HowToUseThisPlayground />
</Container>
<Container size='large' className={classnames(styles.isSection, styles.jsonSection)}>
<div className={styles.jsonContainer}>
<div>
<h4 className={styles.jsonTitle}>
JavaScript Agent Response {isLoadingAgentResponse && <Spinner size={16} />}
</h4>
<CollapsibleJsonViewer
dataTestId={TEST_IDS.playground.agentResponseJSON}
json={displayedAgentResponse ?? {}}
/>
</div>
<div>
<h4 className={styles.jsonTitle}>
Server API Response {isLoadingServerResponse && <Spinner size={16} />}
</h4>
<CollapsibleJsonViewer
dataTestId={TEST_IDS.playground.serverResponseJSON}
json={usedIdentificationEvent ?? {}}
/>
) : (
// Spacer element to push footer down when no data is ready
<div style={{ height: '800px' }} />
)}
{cachedEvent ? (
<>
<MyCollapsible defaultOpen>
<h3 className={styles.tableTitle}>
Smart signals{' '}
<MyCollapsibleTrigger>
<ChevronSvg />
</MyCollapsibleTrigger>
</h3>
<MyCollapsibleContent>
<SignalTable data={smartSignals} />
</MyCollapsibleContent>
</MyCollapsible>
<MyCollapsible defaultOpen>
<h3 className={styles.tableTitle}>
Mobile Smart signals{' '}
<MyCollapsibleTrigger>
<ChevronSvg />
</MyCollapsibleTrigger>
</h3>
<MyCollapsibleContent>
<SignalTable data={mobileSmartSignals} />
</MyCollapsibleContent>
</MyCollapsible>
</>
) : null}
</div>
</Container>
{cachedEvent ? (
<>
<Container size='large' className={styles.isSection}>
<h2 className={styles.sectionTitle}>How to use this demo</h2>
<HowToUseThisPlayground />
</Container>
<Container size='large' className={classnames(styles.isSection, styles.jsonSection)}>
<div className={styles.jsonContainer}>
<div>
<h4 className={styles.jsonTitle}>
JavaScript Agent Response {isLoadingAgentResponse && <Spinner size={16} />}
</h4>
<CollapsibleJsonViewer
dataTestId={TEST_IDS.playground.agentResponseJSON}
json={displayedAgentResponse ?? {}}
/>
</div>
<div>
<h4 className={styles.jsonTitle}>
Server API Response {isLoadingServerResponse && <Spinner size={16} />}
</h4>
<CollapsibleJsonViewer
dataTestId={TEST_IDS.playground.serverResponseJSON}
json={usedIdentificationEvent ?? {}}
/>
</div>
</div>
</div>
</Container>
<Container size='large' className={styles.learnMoreSection}>
<h2 className={styles.sectionTitle}>Learn more</h2>
</Container>
<ResourceLinks
resources={[
{
title: 'Quick Start Guide',
url: 'https://dev.fingerprint.com/docs/quick-start-guide',
type: 'Article',
},
{
title: 'What is Fingerprint',
url: 'https://dev.fingerprint.com/docs/what-is-fingerprint',
type: 'Article',
},
{
title: 'Intro to Device Intelligence Webinar',
url: 'https://www.youtube.com/watch?v=YTRmWUeQWyY',
type: 'Webinar',
},
]}
/>
</>
)}
</Container>
<Container size='large' className={styles.learnMoreSection}>
<h2 className={styles.sectionTitle}>Learn more</h2>
</Container>
<ResourceLinks
resources={[
{
title: 'Quick Start Guide',
url: 'https://dev.fingerprint.com/docs/quick-start-guide',
type: 'Article',
},
{
title: 'What is Fingerprint',
url: 'https://dev.fingerprint.com/docs/what-is-fingerprint',
type: 'Article',
},
{
title: 'Intro to Device Intelligence Webinar',
url: 'https://www.youtube.com/watch?v=YTRmWUeQWyY',
type: 'Webinar',
},
]}
/>
</>
) : null}
</>
</>
);
}
Expand Down
8 changes: 2 additions & 6 deletions src/app/playground/components/RefreshButton.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,12 @@
.refreshButton.refreshButton {
display: flex;
padding: rem(12px) rem(24px);
padding: 16px;
font-weight: 500;
font-size: 16px;
font-weight: 500;
font-weight: 400;
line-height: 150%; /* 24px */
white-space: unset;

@include media('<=phoneLandscape') {
font-size: 14px;
}

img {
transition: scale 0.2s ease;
margin-left: rem(4px);
Expand Down
50 changes: 23 additions & 27 deletions src/app/playground/playground.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
.hero {
padding-top: rem(64px);
padding-bottom: rem(40px);
display: flex;
flex-direction: column;
gap: rem(8px);

@include media('<=tabletWide') {
padding-top: rem(40px);
padding-bottom: rem(32px);
}

h1 {
Expand Down Expand Up @@ -54,26 +52,25 @@

.visitorIdBox {
border: 1px dashed v('orange-gradient');

background-color: v('soft-orange-background');
padding: rem(32px) rem(20px);
border-radius: rem(12px);
display: flex;
flex-direction: column;
padding: rem(16px) rem(12px);
border-radius: rem(8px);
gap: rem(8px);
margin-bottom: rem(8px);

@include media('<=tabletWide') {
padding: rem(20px);
margin-bottom: rem(20px);
}

p {
display: inline;
color: v('dark-gray');
text-align: center;
font-family: Inter;
font-size: rem(20px);
font-size: rem(18px);
line-height: 160%;
font-weight: 400;
font-weight: 600;
margin: 0;

@include media('<=tabletWide') {
Expand All @@ -85,10 +82,11 @@
color: v('orange-gradient');
text-align: center;
font-family: 'JetBrains Mono';
font-size: 30px;
font-weight: 500;
font-size: 18px;
font-weight: 800;
line-height: 130%;
margin: 0;
display: inline;

@include media('<=tabletWide') {
font-size: rem(23px);
Expand Down Expand Up @@ -172,15 +170,13 @@ h2.sectionTitle {

.runningIntelligence {
display: flex;
flex-direction: column;
gap: 40px;
align-items: center;
min-height: 60vh;
padding-top: rem(32px);
justify-content: center;
padding-bottom: rem(24px);
font-weight: 500;

@include media('<=tabletWide') {
padding-top: rem(24px);
gap: rem(20px);
@include media('<=phoneLandscape') {
justify-content: left;
text-align: left;
}

h2 {
Expand All @@ -190,9 +186,13 @@ h2.sectionTitle {
font-size: 16px;
font-weight: 400;
line-height: 160%;

padding: rem(16px) 0;
animation: reveal 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
display: inline-block;

@include media('<=phoneLandscape') {
text-align: left;
}
}

.blink {
Expand Down Expand Up @@ -237,14 +237,10 @@ h2.sectionTitle {
letter-spacing: 0.13px;
}

.reloadButton {
margin: rem(16px) auto rem(32px) auto;

.reloadButton.reloadButton {
@include media('<=phoneLandscape') {
&.reloadButton {
margin: rem(16px) 0 rem(32px) 0;
padding: 0px;
}
padding-left: 0px;
text-align: left;
}
}

Expand Down
Loading
Loading