change(ui): projects revamp - install docs change
This commit is contained in:
Shekar Siri
parent
a9bbf31f73
commit
b5bf70a8e0
3 changed files with 344 additions and 30 deletions
175
frontend/app/components/Client/Projects/ProjectCodeSnippet.tsx
Normal file
175
frontend/app/components/Client/Projects/ProjectCodeSnippet.tsx
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { useStore } from 'App/mstore';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { Checkbox, Loader, Toggler } from 'UI';
|
||||
import GDPR from 'App/mstore/types/gdpr';
|
||||
import cn from 'classnames';
|
||||
import stl from './projectCodeSnippet.module.css';
|
||||
import Select from 'Shared/Select';
|
||||
import CodeSnippet from 'Shared/CodeSnippet';
|
||||
import CircleNumber from 'Components/Onboarding/components/CircleNumber';
|
||||
import Project from '@/mstore/types/project';
|
||||
|
||||
interface InputModeOption {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
const inputModeOptions: InputModeOption[] = [
|
||||
{ label: 'Record all inputs', value: 'plain' },
|
||||
{ label: 'Ignore all inputs', value: 'obscured' },
|
||||
{ label: 'Obscure all inputs', value: 'hidden' }
|
||||
];
|
||||
|
||||
const inputModeOptionsMap: Record<string, number> = {};
|
||||
inputModeOptions.forEach((o, i) => (inputModeOptionsMap[o.value] = i));
|
||||
|
||||
interface Props {
|
||||
project: Project;
|
||||
}
|
||||
|
||||
const ProjectCodeSnippet: React.FC = (props: Props) => {
|
||||
const { projectsStore } = useStore();
|
||||
const siteId = projectsStore.siteId;
|
||||
const site = props.project;
|
||||
const gdpr = site.gdpr as GDPR;
|
||||
const sites = projectsStore.list;
|
||||
const editGDPR = projectsStore.editGDPR;
|
||||
const onSaveGDPR = projectsStore.saveGDPR;
|
||||
const init = projectsStore.initProject;
|
||||
const [changed, setChanged] = useState(false);
|
||||
const [isAssistEnabled, setAssistEnabled] = useState(false);
|
||||
const [showLoader, setShowLoader] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const currentSite = sites.find((s) => s.id === siteId);
|
||||
if (currentSite) {
|
||||
init(currentSite);
|
||||
}
|
||||
}, [init, siteId, sites]);
|
||||
|
||||
const saveGDPR = () => {
|
||||
setChanged(true);
|
||||
void onSaveGDPR(site.id);
|
||||
};
|
||||
|
||||
const onChangeSelect = (data: { name: string; value: string }) => {
|
||||
editGDPR({ [data.name]: data.value });
|
||||
saveGDPR();
|
||||
};
|
||||
|
||||
const onChangeOption = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, checked } = event.target;
|
||||
editGDPR({ [name]: checked });
|
||||
saveGDPR();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setShowLoader(true);
|
||||
const timer = setTimeout(() => {
|
||||
setShowLoader(false);
|
||||
}, 200);
|
||||
return () => clearTimeout(timer);
|
||||
}, [isAssistEnabled]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-4">
|
||||
<div className="font-semibold mb-2 flex items-center">
|
||||
<CircleNumber text="1" /> Choose data recording options
|
||||
</div>
|
||||
|
||||
<div className="ml-10 mb-4" style={{ maxWidth: '50%' }}>
|
||||
<Select
|
||||
name="defaultInputMode"
|
||||
options={inputModeOptions}
|
||||
onChange={({ value }) =>
|
||||
onChangeSelect({ name: 'defaultInputMode', value: value.value })
|
||||
}
|
||||
placeholder="Default Input Mode"
|
||||
defaultValue={gdpr.defaultInputMode}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mx-4" />
|
||||
<div className="flex items-center ml-10">
|
||||
<Checkbox
|
||||
name="maskNumbers"
|
||||
type="checkbox"
|
||||
checked={gdpr.maskNumbers}
|
||||
onChange={onChangeOption}
|
||||
className="mr-2"
|
||||
label="Do not record any numeric text"
|
||||
/>
|
||||
|
||||
<div className="mx-4" />
|
||||
|
||||
<Checkbox
|
||||
name="maskEmails"
|
||||
type="checkbox"
|
||||
checked={gdpr.maskEmails}
|
||||
onChange={onChangeOption}
|
||||
className="mr-2"
|
||||
label="Do not record email addresses"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={cn(stl.info, 'rounded bg-gray mt-2 mb-4 ml-10', { hidden: !changed })}>
|
||||
Below code snippet changes depending on the data recording options chosen.
|
||||
</div>
|
||||
|
||||
<div className={cn(stl.instructions, 'mt-8')}>
|
||||
<div className="font-semibold flex items-center">
|
||||
<CircleNumber text="2" />
|
||||
<span>Enable Assist (Optional)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-10">
|
||||
<p>
|
||||
OpenReplay Assist allows you to support your users by seeing their live screen and
|
||||
instantly hopping on call (WebRTC) with them without requiring any 3rd-party screen
|
||||
sharing software.
|
||||
</p>
|
||||
<Toggler
|
||||
label="Yes"
|
||||
checked={isAssistEnabled}
|
||||
name="test"
|
||||
className="font-medium mr-2"
|
||||
onChange={() => setAssistEnabled(!isAssistEnabled)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={cn(stl.instructions, 'mt-8')}>
|
||||
<div className="font-semibold flex items-center">
|
||||
<CircleNumber text="3" />
|
||||
<span>Install SDK</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ml-10 mb-2">
|
||||
Paste this snippet <span>{'before the '}</span>
|
||||
<span className={stl.highLight}> {'</head>'} </span>
|
||||
<span>{' tag of your page.'}</span>
|
||||
</div>
|
||||
<div className={cn(stl.snippetsWrapper, 'ml-10')}>
|
||||
{showLoader ? (
|
||||
<div style={{ height: '474px' }}>
|
||||
<Loader loading={true} />
|
||||
</div>
|
||||
) : (
|
||||
<CodeSnippet
|
||||
isAssistEnabled={isAssistEnabled}
|
||||
host={site?.host}
|
||||
projectKey={site?.projectKey!}
|
||||
ingestPoint={`"https://${window.location.hostname}/ingest"`}
|
||||
defaultInputMode={gdpr.defaultInputMode}
|
||||
obscureTextNumbers={gdpr.maskNumbers}
|
||||
obscureTextEmails={gdpr.maskEmails}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default observer(ProjectCodeSnippet);
|
||||
|
|
@ -1,16 +1,19 @@
|
|||
import React from 'react';
|
||||
import Project from '@/mstore/types/project';
|
||||
import InstallMobileDocs from 'Shared/TrackingCodeModal/InstallIosDocs';
|
||||
import { Tabs } from 'UI';
|
||||
import ProjectCodeSnippet from 'Shared/TrackingCodeModal/ProjectCodeSnippet/ProjectCodeSnippet';
|
||||
import InstallDocs from 'Shared/TrackingCodeModal/InstallDocs';
|
||||
import usePageTitle from '@/hooks/usePageTitle';
|
||||
|
||||
const PROJECT = 'Using Script';
|
||||
const DOCUMENTATION = 'Using NPM';
|
||||
import usePageTitle from '@/hooks/usePageTitle';
|
||||
import InstallDocs from 'Components/Onboarding/components/OnboardingTabs/InstallDocs';
|
||||
import ProjectCodeSnippet from 'Components/Client/Projects/ProjectCodeSnippet';
|
||||
import MobileInstallDocs from 'Components/Onboarding/components/OnboardingTabs/InstallDocs/MobileInstallDocs';
|
||||
import { Segmented } from 'antd';
|
||||
import AndroidInstallDocs from 'Components/Onboarding/components/OnboardingTabs/InstallDocs/AndroidInstallDocs';
|
||||
|
||||
const JAVASCRIPT = 'Using Script';
|
||||
const NPM = 'Using NPM';
|
||||
const TABS = [
|
||||
{ key: DOCUMENTATION, text: DOCUMENTATION },
|
||||
{ key: PROJECT, text: PROJECT }
|
||||
{ key: NPM, text: NPM },
|
||||
{ key: JAVASCRIPT, text: JAVASCRIPT }
|
||||
];
|
||||
|
||||
interface Props {
|
||||
|
|
@ -20,35 +23,70 @@ interface Props {
|
|||
function ProjectTabTracking(props: Props) {
|
||||
usePageTitle('Installation - OpenReplay Preferences');
|
||||
const { project } = props;
|
||||
const [activeTab, setActiveTab] = React.useState(PROJECT);
|
||||
const ingestPoint = `https://${window.location.hostname}/ingest`;
|
||||
|
||||
const renderActiveTab = () => {
|
||||
switch (activeTab) {
|
||||
case PROJECT:
|
||||
return <ProjectCodeSnippet site={project} />;
|
||||
case DOCUMENTATION:
|
||||
return <InstallDocs site={project} />;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{project.platform === 'ios' ? (
|
||||
<InstallMobileDocs site={project} ingestPoint={ingestPoint} />
|
||||
{project.platform !== 'web' ? (
|
||||
<MobileSnippet project={project} />
|
||||
) : (
|
||||
<div>
|
||||
<Tabs
|
||||
tabs={TABS}
|
||||
active={activeTab}
|
||||
onClick={(tab: string) => setActiveTab(tab)}
|
||||
/>
|
||||
<div className="p-5">{renderActiveTab()}</div>
|
||||
</div>
|
||||
<WebSnippet project={project} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProjectTabTracking;
|
||||
|
||||
function WebSnippet({ project }: { project: Project }) {
|
||||
const [isNpm, setIsNpm] = React.useState(true);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<Segmented
|
||||
options={[
|
||||
{ label: 'Using NPM', value: true },
|
||||
{ label: 'Using Script', value: false }
|
||||
]}
|
||||
value={isNpm}
|
||||
onChange={setIsNpm}
|
||||
block={true}
|
||||
style={{ maxWidth: '200px' }}
|
||||
className="!align-middle"
|
||||
/>
|
||||
|
||||
{isNpm ? (
|
||||
<InstallDocs site={project} />
|
||||
) : (
|
||||
<ProjectCodeSnippet project={project} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MobileSnippet({ project }: { project: Project }) {
|
||||
const [isIos, setIsIos] = React.useState(true);
|
||||
const ingestPoint = `https://${window.location.hostname}/ingest`;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<Segmented
|
||||
options={[
|
||||
{ label: 'iOS', value: true },
|
||||
{ label: 'Android', value: false }
|
||||
]}
|
||||
value={isIos}
|
||||
onChange={setIsIos}
|
||||
block={true}
|
||||
style={{ maxWidth: '150px' }}
|
||||
className="!align-middle"
|
||||
/>
|
||||
|
||||
|
||||
{isIos ? (
|
||||
<MobileInstallDocs site={project} ingestPoint={ingestPoint} />
|
||||
) : (
|
||||
<AndroidInstallDocs site={project} ingestPoint={ingestPoint} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
|
||||
@import 'zindex.css';
|
||||
|
||||
.modalHeader {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
.highLight {
|
||||
background-color: rgba(204, 0, 0, 0.05);
|
||||
color: $red;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.snippetsWrapper {
|
||||
position: relative;
|
||||
& .codeCopy {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
z-index: $codeSnippet;
|
||||
padding: 5px 10px;
|
||||
color: $teal;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
transition: all 0.4s;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background-color: $gray-light;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
}
|
||||
& .snippet {
|
||||
overflow: hidden;
|
||||
line-height: 18px;
|
||||
border-radius: 5px;
|
||||
user-select: none;
|
||||
& > div {
|
||||
background-color: $gray-lightest !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.siteInfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
& span {
|
||||
color: $teal;
|
||||
}
|
||||
}
|
||||
.instructions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.closeButton {
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.siteId {
|
||||
font-weight: 500;
|
||||
& span {
|
||||
background: #f6f6f6;
|
||||
border-radius: 3px;
|
||||
padding: 2px 7px;
|
||||
font-weight: normal;
|
||||
margin-left: 4px;
|
||||
border: solid thin #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 5px 10px;
|
||||
background-color: #ffedd1;
|
||||
}
|
||||
|
||||
.number {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: black;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue