You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
3.5 KiB
120 lines
3.5 KiB
import PropTypes from 'prop-types';
|
|
import React, { PureComponent } from 'react';
|
|
import PermissionsConnectHeader from '../../permissions-connect-header';
|
|
import Tooltip from '../../../ui/tooltip';
|
|
import PermissionsConnectPermissionList from '../../permissions-connect-permission-list';
|
|
|
|
export default class PermissionPageContainerContent extends PureComponent {
|
|
static propTypes = {
|
|
domainMetadata: PropTypes.shape({
|
|
extensionId: PropTypes.string,
|
|
icon: PropTypes.string,
|
|
host: PropTypes.string.isRequired,
|
|
name: PropTypes.string.isRequired,
|
|
origin: PropTypes.string.isRequired,
|
|
}),
|
|
selectedPermissions: PropTypes.object.isRequired,
|
|
selectedIdentities: PropTypes.array,
|
|
allIdentitiesSelected: PropTypes.bool,
|
|
};
|
|
|
|
static defaultProps = {
|
|
selectedIdentities: [],
|
|
allIdentitiesSelected: false,
|
|
};
|
|
|
|
static contextTypes = {
|
|
t: PropTypes.func,
|
|
};
|
|
|
|
renderRequestedPermissions() {
|
|
const { selectedPermissions } = this.props;
|
|
|
|
return (
|
|
<div className="permission-approval-container__content__requested">
|
|
<PermissionsConnectPermissionList permissions={selectedPermissions} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
renderAccountTooltip(textContent) {
|
|
const { selectedIdentities } = this.props;
|
|
const { t } = this.context;
|
|
|
|
return (
|
|
<Tooltip
|
|
key="all-account-connect-tooltip"
|
|
position="bottom"
|
|
wrapperClassName="permission-approval-container__bold-title-elements"
|
|
html={
|
|
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
|
{selectedIdentities.slice(0, 6).map((identity, index) => {
|
|
return (
|
|
<div key={`tooltip-identity-${index}`}>
|
|
{identity.addressLabel}
|
|
</div>
|
|
);
|
|
})}
|
|
{selectedIdentities.length > 6
|
|
? t('plusXMore', [selectedIdentities.length - 6])
|
|
: null}
|
|
</div>
|
|
}
|
|
>
|
|
{textContent}
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
getTitle() {
|
|
const {
|
|
domainMetadata,
|
|
selectedIdentities,
|
|
allIdentitiesSelected,
|
|
} = this.props;
|
|
const { t } = this.context;
|
|
|
|
if (domainMetadata.extensionId) {
|
|
return t('externalExtension', [domainMetadata.extensionId]);
|
|
} else if (allIdentitiesSelected) {
|
|
return t('connectToAll', [
|
|
this.renderAccountTooltip(t('connectToAllAccounts')),
|
|
]);
|
|
} else if (selectedIdentities.length > 1) {
|
|
return t('connectToMultiple', [
|
|
this.renderAccountTooltip(
|
|
t('connectToMultipleNumberOfAccounts', [selectedIdentities.length]),
|
|
),
|
|
]);
|
|
}
|
|
return t('connectTo', [selectedIdentities[0]?.addressLabel]);
|
|
}
|
|
|
|
render() {
|
|
const { domainMetadata } = this.props;
|
|
const { t } = this.context;
|
|
|
|
const title = this.getTitle();
|
|
|
|
return (
|
|
<div className="permission-approval-container__content">
|
|
<div className="permission-approval-container__content-container">
|
|
<PermissionsConnectHeader
|
|
icon={domainMetadata.icon}
|
|
iconName={domainMetadata.name}
|
|
headerTitle={title}
|
|
headerText={
|
|
domainMetadata.extensionId
|
|
? t('allowExternalExtensionTo', [domainMetadata.extensionId])
|
|
: t('allowThisSiteTo')
|
|
}
|
|
siteOrigin={domainMetadata.origin}
|
|
/>
|
|
<section className="permission-approval-container__permissions-container">
|
|
{this.renderRequestedPermissions()}
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|