0c0dd30a73
* fix(tracker): fix assist typings * fix(tracker): fix assist typings * change(ui) - preferences - removed old * change(ui) - preferences - wip * change(ui) - preferences - list * change(ui) - right box mardings * change(ui) - preferences - integration item paddings * change(ui) - preferences - integration icons * change(ui) - preferences - integration icons * change(ui) - preferences - integration - check status * change(ui) - preferences - integration - check status * change(ui) - preferences - metadata - move the delete button inside the modal * change(ui) - preferences - webhooks - modal and delete btn changes * change(ui) - preferences - modalContext updates * change(ui) - input field forward refs * change(ui) - metadata - modal * change(ui) - metadata - set deleting item to null * change(ui) - integrations * change(ui) - hoc withcopy * change(ui) - projects * change(ui) - users list modal * change(ui) - projects remove border for the last * change(ui) - integrations new api changes * change(ui) - github and jira changes * change(ui) - github and jira changes Co-authored-by: sylenien <nikita@openreplay.com>
39 lines
1.6 KiB
TypeScript
39 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import cn from 'classnames';
|
|
import { Icon, Popup } from 'UI';
|
|
import stl from './integrationItem.module.css';
|
|
import { connect } from 'react-redux';
|
|
|
|
interface Props {
|
|
integration: any;
|
|
onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
|
|
integrated?: boolean;
|
|
hide?: boolean;
|
|
}
|
|
|
|
const IntegrationItem = (props: Props) => {
|
|
const { integration, integrated, hide = false } = props;
|
|
return hide ? <></> : (
|
|
<div className={cn(stl.wrapper, 'mb-4', { [stl.integrated]: integrated })} onClick={(e) => props.onClick(e)}>
|
|
{integrated && (
|
|
<div className="m-2 absolute right-0 top-0 h-4 w-4 rounded-full bg-teal flex items-center justify-center">
|
|
<Popup content="Integrated" delay={0}>
|
|
<Icon name="check" size="14" color="white" />
|
|
</Popup>
|
|
</div>
|
|
)}
|
|
<img className="h-12 w-12" src={'/assets/' + integration.icon + '.svg'} alt="integration" />
|
|
<div className="text-center mt-2">
|
|
<h4 className="">{integration.title}</h4>
|
|
<p className="text-sm color-gray-medium m-0 p-0 h-3">{integration.subtitle && integration.subtitle}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default connect((state: any, props: Props) => {
|
|
const list = state.getIn([props.integration.slug, 'list']) || [];
|
|
return {
|
|
// integrated: props.integration.slug === 'issues' ? !!(list.first() && list.first().token) : list.size > 0,
|
|
};
|
|
})(IntegrationItem);
|