Skip to content

Commit

Permalink
feat(frontend): add external integrations (#3567)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorgeepc
jorgeepc committed Jan 26, 2024
1 parent 075bf47 commit 586cdb0
Show file tree
Hide file tree
Showing 9 changed files with 238 additions and 14 deletions.
19 changes: 19 additions & 0 deletions web/src/components/IntegrationIcon/Icons/Cypress.tsx
View file
@@ -0,0 +1,19 @@
import {IIconProps} from '../IntegrationIcon';

const Cypress = ({color, width = '16', height = '16'}: IIconProps) => (
<svg width={width} height={height} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_748_3566)">
<path
d="M7.99867 0C3.57734 0 1.78031e-06 3.578 1.78031e-06 8C-0.000699436 9.05077 0.205748 10.0914 0.607537 11.0623C1.00933 12.0332 1.59858 12.9154 2.34158 13.6584C3.08459 14.4014 3.96678 14.9907 4.93771 15.3925C5.90863 15.7943 6.94923 16.0007 8 16C12.422 16 16 12.422 16 8C15.9993 3.578 12.392 0 7.99867 0ZM4.24667 9.71667C4.508 10.0653 4.85734 10.2113 5.35134 10.2113C5.58467 10.2113 5.81734 10.182 6.02067 10.0947C6.22467 10.008 6.45734 9.89067 6.74734 9.71667L7.56267 10.88C6.894 11.4333 6.13734 11.6947 5.26467 11.6947C4.566 11.6947 3.98467 11.5493 3.46134 11.2587C2.95329 10.959 2.54758 10.5128 2.29734 9.97867C2.036 9.42533 1.89 8.78533 1.89 8.02867C1.89 7.302 2.036 6.63267 2.29667 6.08C2.54556 5.52941 2.9508 5.06412 3.462 4.742C3.956 4.422 4.56667 4.27667 5.236 4.27667C5.702 4.27667 6.138 4.33467 6.48734 4.48C6.87925 4.6317 7.24296 4.84803 7.56334 5.12L6.74867 6.22533C6.54185 6.07263 6.31733 5.94549 6.08 5.84667C5.87667 5.76 5.61467 5.73067 5.38134 5.73067C4.39267 5.73067 3.898 6.48667 3.898 8.028C3.86934 8.81467 4.01467 9.36667 4.24734 9.716L4.24667 9.71667ZM12.2467 11.52C11.956 12.422 11.5193 13.0913 10.908 13.5853C10.2973 14.0807 9.48267 14.342 8.46467 14.4293L8.26134 13.0627C8.93 12.9747 9.42467 12.8293 9.74467 12.596C9.86067 12.5093 10.094 12.2473 10.094 12.2473L7.67934 4.50933H9.686L11.0827 10.298L12.5667 4.50933H14.5153L12.2467 11.52Z"
fill={color}
/>
</g>
<defs>
<clipPath id="clip0_748_3566">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
);

export default Cypress;
19 changes: 19 additions & 0 deletions web/src/components/IntegrationIcon/Icons/K6.tsx
View file
@@ -0,0 +1,19 @@
import {IIconProps} from '../IntegrationIcon';

const K6 = ({color, width = '16', height = '16'}: IIconProps) => (
<svg width={width} height={height} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_748_3570)">
<path
d="M16.5083 15.9999H0.0220947L5.51045 4.29288L8.81648 6.72331L13.1287 6.10352e-05L16.5083 15.9999ZM10.4636 13.4713H10.4989C10.907 13.472 11.2993 13.3143 11.5933 13.0314C11.744 12.8947 11.8638 12.7276 11.9449 12.541C12.026 12.3544 12.0665 12.1528 12.0637 11.9494C12.0704 11.7534 12.0332 11.5584 11.9548 11.3787C11.8763 11.199 11.7586 11.0392 11.6103 10.9109C11.3603 10.6601 11.0235 10.515 10.6695 10.5057H10.6424C10.5961 10.5055 10.55 10.5118 10.5054 10.5245L11.3757 9.2308L10.6824 8.74683L10.3542 9.2308L9.51571 10.5116C9.37162 10.7239 9.25104 10.9109 9.17639 11.0408C9.09891 11.1783 9.03226 11.3217 8.97701 11.4695C8.9142 11.6266 8.8819 11.7943 8.88176 11.9635C8.87982 12.1645 8.92017 12.3637 9.00022 12.5481C9.08022 12.7325 9.19818 12.8979 9.34634 13.0338C9.63646 13.3164 10.0257 13.4743 10.4307 13.4736L10.4636 13.4713ZM6.77772 12.0788L7.7386 13.4377H8.76592L7.63566 11.8612L8.63951 10.4675L7.97321 10.0064L7.6792 10.3946L6.77653 11.6671V9.10846L5.87681 8.37516V13.4372H6.77653V12.0776L6.77772 12.0788ZM10.4648 12.6227C10.2894 12.6227 10.1211 12.553 9.99703 12.4289C9.87297 12.3049 9.80327 12.1366 9.80327 11.9611C9.80327 11.7857 9.87297 11.6174 9.99703 11.4933C10.1211 11.3693 10.2894 11.2996 10.4648 11.2996H10.4707C10.5578 11.2997 10.6441 11.3174 10.7242 11.3516C10.8043 11.3859 10.8767 11.436 10.937 11.499C11.0005 11.5572 11.051 11.6282 11.0853 11.7071C11.1196 11.7862 11.1371 11.8715 11.1364 11.9576C11.1342 12.1343 11.0626 12.3029 10.9371 12.4272C10.8115 12.5514 10.642 12.6213 10.4654 12.6215L10.4648 12.6227Z"
fill={color}
/>
</g>
<defs>
<clipPath id="clip0_748_3570">
<rect width="16.5304" height="16" fill="white" />
</clipPath>
</defs>
</svg>
);

export default K6;
36 changes: 36 additions & 0 deletions web/src/components/IntegrationIcon/Icons/Playwright.tsx
View file
@@ -0,0 +1,36 @@
import {IIconProps} from '../IntegrationIcon';

const Playwright = ({color, width = '16', height = '16'}: IIconProps) => (
<svg width={width} height={height} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.4578 8.86284C4.94236 9.00912 4.6042 9.2656 4.38144 9.52188C4.5948 9.33516 4.8806 9.1638 5.26612 9.05452C5.66044 8.94276 5.99684 8.94356 6.2748 8.9972V8.77984C6.03768 8.75816 5.76584 8.77544 5.4578 8.86284ZM4.35788 7.03564L2.44362 7.53996C2.44362 7.53996 2.47851 7.58924 2.54311 7.655L4.16616 7.22732C4.16616 7.22732 4.14316 7.52368 3.94343 7.7888C4.32124 7.50296 4.35788 7.03564 4.35788 7.03564ZM5.96024 11.5345C3.26637 12.26 1.84113 9.13812 1.40962 7.51772C1.21026 6.76976 1.12323 6.20328 1.10004 5.83772C1.09755 5.79976 1.0987 5.76776 1.10138 5.73844C0.961639 5.74688 0.894735 5.81952 0.908347 6.02944C0.931543 6.3948 1.01857 6.96124 1.21793 7.70944C1.64924 9.3296 3.07467 12.4515 5.76856 11.726C6.35492 11.568 6.79544 11.2803 7.12612 10.913C6.82132 11.1883 6.43984 11.4051 5.96024 11.5345ZM6.46648 5.125V5.31672H7.52312C7.50144 5.24884 7.4796 5.18768 7.45792 5.125H6.46648Z"
fill={color}
/>
<path
d="M7.75929 6.70255C8.23449 6.83751 8.48581 7.17067 8.61865 7.46551L9.14849 7.61599C9.14849 7.61599 9.07621 6.58411 8.14285 6.31899C7.26969 6.07091 6.73237 6.80415 6.66701 6.89903C6.92101 6.71807 7.29193 6.56991 7.75929 6.70255ZM11.9769 7.47027C11.103 7.22107 10.5658 7.95583 10.5014 8.04939C10.7556 7.86863 11.1264 7.72043 11.5935 7.85367C12.068 7.98883 12.3191 8.32159 12.4523 8.61663L12.9829 8.76767C12.9829 8.76767 12.9095 7.73559 11.9769 7.47027ZM11.4505 10.191L7.04293 8.95879C7.04293 8.95879 7.09065 9.20071 7.27373 9.51395L10.9847 10.5514C11.2902 10.3746 11.4505 10.191 11.4505 10.191ZM8.39473 12.8433C4.90477 11.9076 5.32669 7.46091 5.89141 5.35379C6.12393 4.48543 6.36297 3.84 6.56121 3.40735C6.44293 3.383 6.34497 3.44531 6.24817 3.64217C6.03769 4.06907 5.76853 4.76415 5.50805 5.73719C4.94349 7.84427 4.52157 12.2908 8.01137 13.2265C9.65629 13.6671 10.9377 12.9974 11.893 11.9455C10.9862 12.7668 9.82861 13.2272 8.39473 12.8433Z"
fill={color}
/>
<path
d="M6.46647 10.4912V9.59392L3.97332 10.3009C3.97332 10.3009 4.15755 9.23048 5.45779 8.86164C5.85211 8.74988 6.18855 8.75064 6.46647 8.80432V5.1238H7.71479C7.57887 4.7038 7.44739 4.38044 7.33695 4.15576C7.15427 3.78388 6.96699 4.0304 6.54183 4.386C6.24239 4.63616 5.48559 5.16984 4.34675 5.47672C3.20789 5.7838 2.28719 5.70236 1.90304 5.63584C1.35843 5.54188 1.07358 5.42228 1.10022 5.83652C1.12342 6.20188 1.21045 6.76836 1.40981 7.51652C1.84112 9.13672 3.26655 12.2586 5.96043 11.5331C6.66411 11.3435 7.16079 10.9687 7.50507 10.491H6.46647V10.4912ZM2.44342 7.53876L4.35787 7.03444C4.35787 7.03444 4.30207 7.77092 3.58438 7.96012C2.86648 8.14912 2.44342 7.53876 2.44342 7.53876Z"
fill={color}
/>
<path
d="M13.6714 5.16641C13.1738 5.25365 11.9799 5.36233 10.5044 4.96685C9.0286 4.57161 8.0494 3.88035 7.66144 3.55543C7.11148 3.09479 6.86956 2.77466 6.63148 3.25888C6.421 3.68597 6.15184 4.38105 5.89132 5.35409C5.3268 7.46117 4.90488 11.9077 8.39464 12.8434C11.8837 13.7783 13.7412 9.71625 14.3057 7.60897C14.5662 6.63613 14.6805 5.89945 14.7119 5.42445C14.7478 4.88637 14.3782 5.04257 13.6714 5.16641ZM6.65984 6.90969C6.65984 6.90969 7.2098 6.05433 8.14256 6.31945C9.07592 6.58457 9.1482 7.61645 9.1482 7.61645L6.65984 6.90969ZM8.93676 10.748C7.29608 10.2674 7.04304 8.95905 7.04304 8.95905L11.4504 10.1913C11.4504 10.1911 10.5608 11.2226 8.93676 10.748ZM10.495 8.05925C10.495 8.05925 11.0442 7.20449 11.9768 7.47037C12.9094 7.73589 12.9828 8.76777 12.9828 8.76777L10.495 8.05925Z"
fill={color}
/>
<path
d="M5.59518 9.84152L3.97327 10.3012C3.97327 10.3012 4.14946 9.29752 5.34426 8.89976L4.42586 5.45312L4.3465 5.47724C3.20765 5.78436 2.28694 5.70288 1.90279 5.63636C1.35819 5.54244 1.07334 5.4228 1.09998 5.83708C1.12318 6.20244 1.2102 6.76888 1.40956 7.51708C1.84088 9.13724 3.26631 12.2592 5.96018 11.5336L6.03954 11.5087L5.59518 9.84152ZM2.44337 7.53932L4.35782 7.03497C4.35782 7.03497 4.30202 7.77145 3.58432 7.96065C2.86644 8.14965 2.44337 7.53932 2.44337 7.53932Z"
fill={color}
/>
<path
d="M9.01076 10.766L8.93656 10.7479C7.29588 10.2674 7.04284 8.95905 7.04284 8.95905L9.31556 9.59433L10.5188 4.97069L10.5042 4.96685C9.0284 4.57161 8.04924 3.88035 7.66124 3.55543C7.11128 3.09479 6.86936 2.77466 6.63128 3.25888C6.421 3.68597 6.15184 4.38105 5.89132 5.35409C5.3268 7.46117 4.90488 11.9077 8.39464 12.8433L8.46616 12.8595L9.01076 10.766ZM6.65984 6.90969C6.65984 6.90969 7.2098 6.05433 8.14256 6.31945C9.07592 6.58457 9.1482 7.61645 9.1482 7.61645L6.65984 6.90969Z"
fill={color}
/>
<path
d="M5.67788 9.8173L5.24292 9.94074C5.34568 10.52 5.5268 11.0759 5.81108 11.5671C5.86056 11.5561 5.90964 11.5467 5.96004 11.5329C6.09212 11.4973 6.2146 11.4532 6.33252 11.4051C6.01488 10.9337 5.80476 10.3908 5.67788 9.8173ZM5.50804 5.7373C5.28452 6.57154 5.08456 7.7723 5.1396 8.9767C5.23812 8.93394 5.3422 8.8941 5.4578 8.8613L5.53832 8.8433C5.44016 7.55682 5.65236 6.24586 5.8914 5.3539C5.952 5.12826 6.01276 4.91838 6.07332 4.72266C5.97576 4.78474 5.87072 4.84838 5.75108 4.91394C5.6704 5.16298 5.58892 5.43518 5.50804 5.7373Z"
fill={color}
/>
</svg>
);

export default Playwright;
35 changes: 35 additions & 0 deletions web/src/components/IntegrationIcon/IntegrationIcon.tsx
View file
@@ -0,0 +1,35 @@
import {useTheme} from 'styled-components';
import {SupportedIntegrations} from 'constants/Integrations.constants';
import Cypress from './Icons/Cypress';
import K6 from './Icons/K6';
import Playwright from './Icons/Playwright';

const iconMap = {
[SupportedIntegrations.CYPRESS]: Cypress,
[SupportedIntegrations.PLAYWRIGHT]: Playwright,
[SupportedIntegrations.K6]: K6,
} as const;

interface IProps {
color?: string;
integrationName: SupportedIntegrations;
width?: string;
height?: string;
}

export interface IIconProps {
color: string;
width?: string;
height?: string;
}

const IntegrationIcon = ({color, integrationName, width, height}: IProps) => {
const {
color: {text: defaultColor},
} = useTheme();
const Component = iconMap[integrationName];

return <Component color={color || defaultColor} width={width} height={height} />;
};

export default IntegrationIcon;
2 changes: 2 additions & 0 deletions web/src/components/IntegrationIcon/index.ts
View file
@@ -0,0 +1,2 @@
// eslint-disable-next-line no-restricted-exports
export {default} from './IntegrationIcon';
34 changes: 34 additions & 0 deletions web/src/components/TriggerTypeModal/IntegrationTypeCard.tsx
View file
@@ -0,0 +1,34 @@
import IntegrationIcon from 'components/IntegrationIcon/';
import {GITHUB_ISSUES_URL} from 'constants/Common.constants';
import {IIntegration} from 'constants/Integrations.constants';
import * as S from './TriggerTypeModal.styled';

interface IProps {
integration: IIntegration;
}

const IntegrationTypeCard = ({integration: {name, title, isActive, isAvailable, url}}: IProps) => (
<a href={url} target="__blank" aria-disabled={!isActive}>
<S.IntegrationCardContainer $isActive={isActive} $isSelected={false}>
<IntegrationIcon integrationName={name} />

<S.CardContent>
<div>
<S.CardTitle $isActive={isActive}>
{title} {!isAvailable && '*'}{' '}
</S.CardTitle>
{!isActive && (
<S.CardTitle $isActive>
&nbsp;-{' '}
<a href={GITHUB_ISSUES_URL} target="_blank">
Coming soon!
</a>
</S.CardTitle>
)}
</div>
</S.CardContent>
</S.IntegrationCardContainer>
</a>
);

export default IntegrationTypeCard;
47 changes: 33 additions & 14 deletions web/src/components/TriggerTypeModal/TriggerTypeList.tsx
View file
@@ -1,12 +1,15 @@
import {useState} from 'react';
import CreateTestAnalytics from 'services/Analytics/CreateTest.service';
import {Integrations} from 'constants/Integrations.constants';
import {CreateTriggerTypeToPlugin} from 'constants/Plugins.constants';
import {TriggerTypes} from 'constants/Test.constants';
import {withCustomization} from 'providers/Customization';
import IntegrationTypeCard from './IntegrationTypeCard';
import TriggerTypeCard from './TriggerTypeCard';
import * as S from './TriggerTypeModal.styled';

const pluginList = Object.values(CreateTriggerTypeToPlugin);
const integrationList = Object.values(Integrations);

interface IProps {
onClick(plugin: TriggerTypes): void;
Expand All @@ -16,20 +19,36 @@ const TriggerTypeList = ({onClick}: IProps) => {
const [selectedType, setSelectedType] = useState<TriggerTypes | undefined>(undefined);

return (
<S.CardList>
{pluginList.map(plugin => (
<TriggerTypeCard
key={plugin.name}
isSelected={selectedType === plugin.type}
onClick={selectedPlugin => {
CreateTestAnalytics.onTriggerSelect(selectedPlugin.type);
onClick(selectedPlugin.type);
setSelectedType(selectedPlugin.type);
}}
plugin={plugin}
/>
))}
</S.CardList>
<>
<S.CardList>
{pluginList.map(plugin => (
<TriggerTypeCard
key={plugin.name}
isSelected={selectedType === plugin.type}
onClick={selectedPlugin => {
CreateTestAnalytics.onTriggerSelect(selectedPlugin.type);
onClick(selectedPlugin.type);
setSelectedType(selectedPlugin.type);
}}
plugin={plugin}
/>
))}
</S.CardList>

<S.Divider />

<S.Title level={3} $marginBottom={16}>
Or trigger a Tracetest via an external integration
</S.Title>

<S.IntegrationCardList>
{integrationList.map(integration => (
<IntegrationTypeCard key={integration.name} integration={integration} />
))}
</S.IntegrationCardList>

<S.Text type="secondary">* this capability is limited to the commercial version of Tracetest.</S.Text>
</>
);
};

Expand Down
17 changes: 17 additions & 0 deletions web/src/components/TriggerTypeModal/TriggerTypeModal.styled.ts
View file
Expand Up @@ -35,6 +35,11 @@ export const CardContainer = styled.div<{$isActive: boolean; $isSelected: boolea
`}
`;

export const IntegrationCardContainer = styled(CardContainer)`
width: auto;
padding-right: 16px;
`;

export const CardContent = styled.div`
display: flex;
flex-direction: column;
Expand All @@ -52,6 +57,10 @@ export const CardList = styled.div`
margin-bottom: 48px;
`;

export const IntegrationCardList = styled(CardList)`
margin-bottom: 16px;
`;

export const CardTitle = styled(Typography.Text).attrs({
strong: true,
})<{$isActive: boolean}>`
Expand Down Expand Up @@ -97,3 +106,11 @@ export const Title = styled(Typography.Title)<{$marginBottom?: number}>`
margin-bottom: ${({$marginBottom}) => $marginBottom || 0}px;
}
`;

export const Text = styled(Typography.Text)``;

export const Divider = styled.div`
height: 1px;
border-top: 1px dashed ${({theme}) => theme.color.borderLight};
margin-bottom: 24px;
`;
43 changes: 43 additions & 0 deletions web/src/constants/Integrations.constants.ts
View file
@@ -0,0 +1,43 @@
export interface IIntegration {
name: SupportedIntegrations;
title: string;
url: string;
isActive: boolean;
isAvailable: boolean;
}

export enum SupportedIntegrations {
CYPRESS = 'Cypress',
PLAYWRIGHT = 'Playwright',
K6 = 'K6',
}

const Cypress: IIntegration = {
name: SupportedIntegrations.CYPRESS,
title: 'Cypress',
url: 'https://docs.tracetest.io/tools-and-integrations/cypress',
isActive: true,
isAvailable: false,
};

const K6: IIntegration = {
name: SupportedIntegrations.K6,
title: 'K6',
url: 'https://docs.tracetest.io/tools-and-integrations/k6',
isActive: true,
isAvailable: true,
};

const Playwright: IIntegration = {
name: SupportedIntegrations.PLAYWRIGHT,
title: 'Playwright',
url: 'https://docs.tracetest.io/tools-and-integrations/playwright',
isActive: true,
isAvailable: false,
};

export const Integrations = {
[SupportedIntegrations.CYPRESS]: Cypress,
[SupportedIntegrations.PLAYWRIGHT]: Playwright,
[SupportedIntegrations.K6]: K6,
} as const;

0 comments on commit 586cdb0

Please sign in to comment.