change(ui) - page titles
This commit is contained in:
Shekar Siri
parent
0c0dd30a73
commit
ed9b86d03c
3 changed files with 102 additions and 81 deletions
|
|
@ -26,6 +26,7 @@ import FetchDoc from './FetchDoc';
|
|||
import ProfilerDoc from './ProfilerDoc';
|
||||
import AxiosDoc from './AxiosDoc';
|
||||
import AssistDoc from './AssistDoc';
|
||||
import { PageTitle } from 'UI';
|
||||
|
||||
interface Props {
|
||||
fetch: (name: string, siteId: string) => void;
|
||||
|
|
@ -35,9 +36,10 @@ interface Props {
|
|||
initialSiteId: string;
|
||||
setSiteId: (siteId: string) => void;
|
||||
siteId: string;
|
||||
hideHeader?: boolean;
|
||||
}
|
||||
function Integrations(props: Props) {
|
||||
const { initialSiteId } = props;
|
||||
const { initialSiteId, hideHeader = false } = props;
|
||||
const { showModal } = useModal();
|
||||
const [loading, setLoading] = React.useState(true);
|
||||
const [integratedList, setIntegratedList] = React.useState([]);
|
||||
|
|
@ -77,6 +79,7 @@ function Integrations(props: Props) {
|
|||
|
||||
return (
|
||||
<div className="mb-4">
|
||||
{!hideHeader && <PageTitle title={<div>Integrations</div>} />}
|
||||
{integrations.map((cat: any) => (
|
||||
<div className="mb-2 border-b last:border-none py-3">
|
||||
<div className="flex items-center">
|
||||
|
|
@ -96,7 +99,10 @@ function Integrations(props: Props) {
|
|||
key={integration.name}
|
||||
integration={integration}
|
||||
onClick={() => onClick(integration)}
|
||||
hide={(integration.slug === 'github' && integratedList.includes('jira') || integration.slug === 'jira' && integratedList.includes('github'))}
|
||||
hide={
|
||||
(integration.slug === 'github' && integratedList.includes('jira')) ||
|
||||
(integration.slug === 'jira' && integratedList.includes('github'))
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,90 +8,105 @@ import TenantKey from './TenantKey';
|
|||
import OptOut from './OptOut';
|
||||
import Licenses from './Licenses';
|
||||
import { connect } from 'react-redux';
|
||||
import { PageTitle } from 'UI';
|
||||
|
||||
@withPageTitle('Account - OpenReplay Preferences')
|
||||
@connect(state => ({
|
||||
account: state.getIn([ 'user', 'account' ]),
|
||||
isEnterprise: state.getIn([ 'user', 'account', 'edition' ]) === 'ee',
|
||||
@connect((state) => ({
|
||||
account: state.getIn(['user', 'account']),
|
||||
isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
|
||||
}))
|
||||
export default class ProfileSettings extends React.PureComponent {
|
||||
render() {
|
||||
const { account, isEnterprise } = this.props;
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="flex items-center">
|
||||
<div className={ styles.left }>
|
||||
<h4 className="text-lg mb-4">{ 'Profile' }</h4>
|
||||
<div className={ styles.info }>{ 'Your email address is your identity on OpenReplay and is used to login.' }</div>
|
||||
</div>
|
||||
<div><Settings /></div>
|
||||
</div>
|
||||
export default class ProfileSettings extends React.PureComponent {
|
||||
render() {
|
||||
const { account, isEnterprise } = this.props;
|
||||
return (
|
||||
<React.Fragment>
|
||||
<PageTitle title={<div>Account</div>} />
|
||||
<div className="flex items-center">
|
||||
<div className={styles.left}>
|
||||
<h4 className="text-lg mb-4">{'Profile'}</h4>
|
||||
<div className={styles.info}>{'Your email address is your identity on OpenReplay and is used to login.'}</div>
|
||||
</div>
|
||||
<div>
|
||||
<Settings />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-b my-10" />
|
||||
<div className="border-b my-10" />
|
||||
|
||||
{ account.hasPassword && (
|
||||
<>
|
||||
<div className="flex items-center">
|
||||
<div className={ styles.left }>
|
||||
<h4 className="text-lg mb-4">{ 'Change Password' }</h4>
|
||||
<div className={ styles.info }>{ 'Updating your password from time to time enhances your account’s security.' }</div>
|
||||
</div>
|
||||
<div><ChangePassword /></div>
|
||||
</div>
|
||||
|
||||
{account.hasPassword && (
|
||||
<>
|
||||
<div className="flex items-center">
|
||||
<div className={styles.left}>
|
||||
<h4 className="text-lg mb-4">{'Change Password'}</h4>
|
||||
<div className={styles.info}>{'Updating your password from time to time enhances your account’s security.'}</div>
|
||||
</div>
|
||||
<div>
|
||||
<ChangePassword />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-b my-10" />
|
||||
</>
|
||||
)}
|
||||
<div className="border-b my-10" />
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className={ styles.left }>
|
||||
<h4 className="text-lg mb-4">{ 'Organization API Key' }</h4>
|
||||
<div className={ styles.info }>{ 'Your API key gives you access to an extra set of services.' }</div>
|
||||
</div>
|
||||
<div><Api /></div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className={styles.left}>
|
||||
<h4 className="text-lg mb-4">{'Organization API Key'}</h4>
|
||||
<div className={styles.info}>{'Your API key gives you access to an extra set of services.'}</div>
|
||||
</div>
|
||||
<div>
|
||||
<Api />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ isEnterprise && (
|
||||
<>
|
||||
<div className="border-b my-10" />
|
||||
<div className="flex items-center">
|
||||
<div className={ styles.left }>
|
||||
<h4 className="text-lg mb-4">{ 'Tenant Key' }</h4>
|
||||
<div className={ styles.info }>{ 'For SSO (SAML) authentication.' }</div>
|
||||
</div>
|
||||
<div><TenantKey /></div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{isEnterprise && (
|
||||
<>
|
||||
<div className="border-b my-10" />
|
||||
<div className="flex items-center">
|
||||
<div className={styles.left}>
|
||||
<h4 className="text-lg mb-4">{'Tenant Key'}</h4>
|
||||
<div className={styles.info}>{'For SSO (SAML) authentication.'}</div>
|
||||
</div>
|
||||
<div>
|
||||
<TenantKey />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{ !isEnterprise && (
|
||||
<>
|
||||
<div className="border-b my-10" />
|
||||
<div className="flex items-center">
|
||||
<div className={ styles.left }>
|
||||
<h4 className="text-lg mb-4">{ 'Data Collection' }</h4>
|
||||
<div className={ styles.info }>{ 'Enables you to control how OpenReplay captures data on your organization’s usage to improve our product.' }</div>
|
||||
</div>
|
||||
<div><OptOut /></div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{!isEnterprise && (
|
||||
<>
|
||||
<div className="border-b my-10" />
|
||||
<div className="flex items-center">
|
||||
<div className={styles.left}>
|
||||
<h4 className="text-lg mb-4">{'Data Collection'}</h4>
|
||||
<div className={styles.info}>
|
||||
{'Enables you to control how OpenReplay captures data on your organization’s usage to improve our product.'}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<OptOut />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{ account.license && (
|
||||
<>
|
||||
<div className="border-b my-10" />
|
||||
{account.license && (
|
||||
<>
|
||||
<div className="border-b my-10" />
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className={ styles.left }>
|
||||
<h4 className="text-lg mb-4">{ 'License' }</h4>
|
||||
<div className={ styles.info }>{ 'License key and expiration date.' }</div>
|
||||
</div>
|
||||
<div><Licenses /></div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
<div className="flex items-center">
|
||||
<div className={styles.left}>
|
||||
<h4 className="text-lg mb-4">{'License'}</h4>
|
||||
<div className={styles.info}>{'License key and expiration date.'}</div>
|
||||
</div>
|
||||
<div>
|
||||
<Licenses />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,17 +17,17 @@ function IntegrationsTab() {
|
|||
<div className="w-8/12 px-4">
|
||||
<h1 className="text-3xl font-bold flex items-center mb-4">
|
||||
<span>🔌</span>
|
||||
<div className="ml-3">Plugins</div>
|
||||
<div className="ml-3">Integrations</div>
|
||||
</h1>
|
||||
<Integrations hideHeader plugins />
|
||||
<Integrations hideHeader={true} />
|
||||
|
||||
<div className="my-4"/>
|
||||
{/* <div className="my-4"/>
|
||||
<h1 className="text-3xl font-bold flex items-center mb-4">
|
||||
<span>🔌</span>
|
||||
<div className="ml-3">Integrations</div>
|
||||
</h1>
|
||||
|
||||
<Integrations hideHeader />
|
||||
<Integrations hideHeader /> */}
|
||||
|
||||
{/* <div className="mt-6">
|
||||
<div className="font-bold mb-4">How are you handling store management?</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue