2023-09-05 14:14:03 +02:00
|
|
|
import { VFC } from 'react';
|
2023-08-22 14:40:38 +02:00
|
|
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
|
|
|
import useAddons from 'hooks/api/getters/useAddons/useAddons';
|
|
|
|
import { AvailableIntegrations } from './AvailableIntegrations/AvailableIntegrations';
|
2023-09-05 14:14:03 +02:00
|
|
|
import { ConfiguredIntegrations } from './ConfiguredIntegrations/ConfiguredIntegrations';
|
|
|
|
import { AddonSchema } from 'openapi';
|
2023-08-22 14:40:38 +02:00
|
|
|
|
2023-09-05 14:14:03 +02:00
|
|
|
export const IntegrationList: VFC = () => {
|
2023-08-22 14:40:38 +02:00
|
|
|
const { providers, addons, loading } = useAddons();
|
2023-09-05 14:14:03 +02:00
|
|
|
|
|
|
|
const loadingPlaceholderAddons: AddonSchema[] = Array.from({ length: 4 })
|
|
|
|
.fill({})
|
|
|
|
.map((_, id) => ({
|
|
|
|
id,
|
|
|
|
provider: 'mock',
|
|
|
|
description: 'mock integratino',
|
|
|
|
events: [],
|
|
|
|
projects: [],
|
|
|
|
parameters: {},
|
|
|
|
enabled: false,
|
|
|
|
}));
|
2023-08-22 14:40:38 +02:00
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<ConditionallyRender
|
|
|
|
condition={addons.length > 0}
|
2023-09-05 14:14:03 +02:00
|
|
|
show={
|
|
|
|
<ConfiguredIntegrations
|
|
|
|
addons={loading ? loadingPlaceholderAddons : addons}
|
|
|
|
providers={providers}
|
|
|
|
loading={loading}
|
|
|
|
/>
|
2023-08-22 14:40:38 +02:00
|
|
|
}
|
|
|
|
/>
|
2023-09-05 14:14:03 +02:00
|
|
|
<AvailableIntegrations providers={providers} loading={loading} />
|
2023-08-22 14:40:38 +02:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|