mirror of
https://github.com/Kong/insomnia
synced 2024-11-07 22:30:15 +00:00
INS-2697: adjust first time user experience (#6015)
This commit is contained in:
Filipe Freire
GitHub
parent
9d735b9f4a
commit
0cb6ab18c3
@ -125,7 +125,6 @@ export interface Settings {
|
||||
fontSize: number;
|
||||
fontVariantLigatures: boolean;
|
||||
forceVerticalLayout: boolean;
|
||||
hasPromptedAnalytics: boolean;
|
||||
hotKeyRegistry: HotKeyRegistry;
|
||||
httpProxy: string;
|
||||
httpsProxy: string;
|
||||
|
||||
@ -40,7 +40,7 @@ export function init(): BaseSettings {
|
||||
editorIndentWithTabs: true,
|
||||
editorKeyMap: 'default',
|
||||
editorLineWrapping: true,
|
||||
enableAnalytics: false,
|
||||
enableAnalytics: true,
|
||||
showVariableSourceAndValue: false,
|
||||
filterResponsesByEnv: false,
|
||||
followRedirects: true,
|
||||
@ -50,11 +50,6 @@ export function init(): BaseSettings {
|
||||
fontVariantLigatures: false,
|
||||
forceVerticalLayout: false,
|
||||
|
||||
/**
|
||||
* Only existing users updating from an older version should see the analytics prompt.
|
||||
* So by default this flag is set to false, and is toggled to true during initialization for new users.
|
||||
*/
|
||||
hasPromptedAnalytics: false || Boolean(process.env.INSOMNIA_INCOGNITO_MODE),
|
||||
hotKeyRegistry: hotkeys.newDefaultRegistry(),
|
||||
httpProxy: '',
|
||||
httpsProxy: '',
|
||||
|
||||
@ -1,143 +0,0 @@
|
||||
import React, { FC, useCallback, useEffect, useRef } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { getAppSynopsis, getProductName } from '../../../common/constants';
|
||||
import * as models from '../../../models';
|
||||
import { SegmentEvent, trackSegmentEvent } from '../../analytics';
|
||||
import chartSrc from '../../images/chart.svg';
|
||||
import coreLogo from '../../images/insomnia-logo.svg';
|
||||
import { selectSettings } from '../../redux/selectors';
|
||||
import { type ModalHandle, Modal } from '../base/modal';
|
||||
import { Button } from '../themed-button';
|
||||
|
||||
const Wrapper = styled.div({
|
||||
position: 'relative',
|
||||
textAlign: 'center',
|
||||
});
|
||||
|
||||
const Header = styled.div({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid var(--hl-sm)',
|
||||
});
|
||||
|
||||
const Headline = styled.div({
|
||||
color: 'var(--color-font)',
|
||||
fontSize: 'var(--font-size-xl)',
|
||||
marginTop: 'var(--padding-sm)',
|
||||
marginBottom: 'var(--padding-sm)',
|
||||
});
|
||||
|
||||
const SubHeader = styled.div({
|
||||
color: 'var(--hl-xl)',
|
||||
marginTop: 0,
|
||||
marginBottom: 0,
|
||||
});
|
||||
|
||||
const InsomniaLogo = styled.div({
|
||||
width: '100%',
|
||||
textAlign: 'center',
|
||||
img: {
|
||||
width: '3.5rem',
|
||||
height: '3.5rem',
|
||||
},
|
||||
});
|
||||
|
||||
const Body = styled.div({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
padding: 'var(--padding-sm) 0 var(--padding-md)',
|
||||
});
|
||||
|
||||
const DemonstrationChart = styled.img({
|
||||
marginTop: 'var(--padding-sm)',
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
const ActionButtons = styled.div({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
'& .btn--super-compact': {
|
||||
textDecoration: 'underline',
|
||||
color: 'var(--hl-xl)',
|
||||
fontSize: 'var(--font-size-md)',
|
||||
marginTop: 'var(--padding-sm)',
|
||||
},
|
||||
});
|
||||
|
||||
export const AnalyticsModal: FC = () => {
|
||||
const { hasPromptedAnalytics } = useSelector(selectSettings);
|
||||
const ref = useRef<ModalHandle>(null);
|
||||
|
||||
const onEnable = useCallback(async () => {
|
||||
await models.settings.patch({
|
||||
enableAnalytics: true,
|
||||
hasPromptedAnalytics: true,
|
||||
});
|
||||
trackSegmentEvent(SegmentEvent.appStarted, {});
|
||||
}, []);
|
||||
const onDisable = async () => {
|
||||
await models.settings.patch({
|
||||
enableAnalytics: false,
|
||||
hasPromptedAnalytics: true,
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (hasPromptedAnalytics) {
|
||||
ref.current?.hide();
|
||||
} else {
|
||||
ref.current?.show();
|
||||
}
|
||||
}, [hasPromptedAnalytics]);
|
||||
|
||||
if (hasPromptedAnalytics) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal centered skinny ref={ref}>
|
||||
<Wrapper>
|
||||
<Header>
|
||||
<InsomniaLogo>
|
||||
<img src={coreLogo} alt="Kong" />
|
||||
</InsomniaLogo>
|
||||
|
||||
<Headline>Welcome to {getProductName()}</Headline>
|
||||
<SubHeader>{getAppSynopsis()}</SubHeader>
|
||||
</Header>
|
||||
|
||||
<Body>
|
||||
<p><strong>Share Usage Analytics with Kong Inc</strong></p>
|
||||
|
||||
<DemonstrationChart src={chartSrc} alt="Demonstration chart" />
|
||||
|
||||
<p>Help us understand how <strong>you</strong> use {getProductName()} so we can make it better.</p>
|
||||
</Body>
|
||||
</Wrapper>
|
||||
<ActionButtons>
|
||||
<Button
|
||||
key="enable"
|
||||
bg="surprise"
|
||||
radius="3px"
|
||||
size="medium"
|
||||
variant="contained"
|
||||
onClick={onEnable}
|
||||
>
|
||||
Share Usage Analytics
|
||||
</Button>
|
||||
|
||||
<button
|
||||
key="disable"
|
||||
className="btn btn--super-compact"
|
||||
onClick={onDisable}
|
||||
>
|
||||
Don't share usage analytics
|
||||
</button>
|
||||
</ActionButtons>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
@ -271,7 +271,6 @@ export const RequestPane: FC<Props> = ({
|
||||
requestUrlBarRef.current?.focusInput();
|
||||
}, [
|
||||
request?._id, // happens when the user switches requests
|
||||
settings.hasPromptedAnalytics, // happens when the user dismisses the analytics modal
|
||||
uniqueKey,
|
||||
]);
|
||||
|
||||
|
||||
@ -52,13 +52,6 @@ const DevelopmentOnlySettings: FC = () => {
|
||||
<hr className="pad-top" />
|
||||
<h2>Development</h2>
|
||||
|
||||
<div className="form-row pad-top-sm">
|
||||
<BooleanSetting
|
||||
label="Has seen analytics prompt"
|
||||
setting="hasPromptedAnalytics"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-row pad-top-sm">
|
||||
<div className="form-control form-control--outlined">
|
||||
<label>
|
||||
|
||||
@ -5,7 +5,6 @@ import { ErrorBoundary } from '../components/error-boundary';
|
||||
import { registerModal } from '../components/modals';
|
||||
import { AddKeyCombinationModal } from '../components/modals/add-key-combination-modal';
|
||||
import { AlertModal } from '../components/modals/alert-modal';
|
||||
import { AnalyticsModal } from '../components/modals/analytics-modal';
|
||||
import { AskModal } from '../components/modals/ask-modal';
|
||||
import { CodePromptModal } from '../components/modals/code-prompt-modal';
|
||||
import { CookieModifyModal } from '../components/modals/cookie-modify-modal';
|
||||
@ -53,7 +52,6 @@ const Modals: FC = () => {
|
||||
return (
|
||||
<div key="modals" className="modals">
|
||||
<ErrorBoundary showAlert>
|
||||
<AnalyticsModal />
|
||||
<AlertModal ref={instance => registerModal(instance, 'AlertModal')} />
|
||||
<ErrorModal ref={instance => registerModal(instance, 'ErrorModal')} />
|
||||
<PromptModal
|
||||
|
||||
Loading…
Reference in New Issue
Block a user