load cards into grid

frontend/src/component/integrations/IntegrationList/AvailableAddons/AvailableAddons.tsx

@@ -19,22 +19,10 @@ import { ActionCell } from 'component/common/Table/cells/ActionCell/ActionCell';
 import { ConfigureAddonsButton } from './ConfigureAddonButton/ConfigureAddonsButton';
 import { IntegrationIcon } from '../IntegrationIcon/IntegrationIcon';
 import { IntegrationNameCell } from '../IntegrationNameCell/IntegrationNameCell';
-import { IAddonInstallation } from 'interfaces/addons';
-import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
-
-interface IProvider {
-    name: string;
-    displayName: string;
-    description: string;
-    documentationUrl: string;
-    parameters: object[];
-    events: string[];
-    installation?: IAddonInstallation;
-    deprecated?: string;
-}
+import type { AddonTypeSchema } from 'openapi';
 
 interface IAvailableAddonsProps {
-    providers: IProvider[];
+    providers: AddonTypeSchema[];
     loading: boolean;
 }
 

frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx

@@ -1,8 +1,34 @@
+import { type VFC } from 'react';
+import type { AddonTypeSchema } from 'openapi';
 import { PageContent } from 'component/common/PageContent/PageContent';
-import { VFC } from 'react';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
+import { IntegrationCard } from '../IntegrationCard/IntegrationCard';
+import { styled } from '@mui/material';
 
-interface IAvailableIntegrationsProps {}
+interface IAvailableIntegrationsProps {
+    providers: AddonTypeSchema[];
+}
 
-export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = () => {
-    return <PageContent>Available integrations</PageContent>;
+const StyledGrid = styled('div')(({ theme }) => ({
+    gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))',
+    gap: theme.spacing(2),
+    display: 'grid',
+}));
+
+export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
+    providers,
+}) => {
+    return (
+        <PageContent header={<PageHeader title="Available integrations" />}>
+            <StyledGrid>
+                {providers?.map(({ name, displayName, description }) => (
+                    <IntegrationCard
+                        key={name}
+                        title={displayName || name}
+                        description={description}
+                    />
+                ))}
+            </StyledGrid>
+        </PageContent>
+    );
 };

frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx

@@ -0,0 +1,30 @@
+import { VFC } from 'react';
+import { Box, styled, Typography } from '@mui/material';
+
+interface IIntegrationCardProps {
+    title: string;
+    description?: string;
+    isEnabled?: boolean;
+    isDeprecated?: boolean;
+}
+
+const StyledBox = styled(Box)(({ theme }) => ({
+    padding: theme.spacing(2),
+    borderRadius: `${theme.shape.borderRadiusMedium}px`,
+    border: `1px solid ${theme.palette.divider}`,
+    boxShadow: theme.shadows[1],
+}));
+
+export const IntegrationCard: VFC<IIntegrationCardProps> = ({
+    title,
+    description,
+    isDeprecated,
+    isEnabled,
+}) => {
+    return (
+        <StyledBox>
+            <Typography variant="h3">{title}</Typography>
+            <Typography variant="body1">{description}</Typography>
+        </StyledBox>
+    );
+};

frontend/src/component/integrations/IntegrationList/IntegrationList.tsx

@@ -18,7 +18,7 @@ export const IntegrationList = () => {
             />
             <ConditionallyRender
                 condition={integrationsRework}
-                show={<AvailableIntegrations />}
+                show={<AvailableIntegrations providers={providers} />}
                 elseShow={
                     <AvailableAddons loading={loading} providers={providers} />
                 }

frontend/src/hooks/api/getters/useAddons/useAddons.ts

@@ -2,12 +2,7 @@ import useSWR, { mutate, SWRConfiguration } from 'swr';
 import { useState, useEffect, useCallback } from 'react';
 import { formatApiPath } from 'utils/formatPath';
 import handleErrorResponses from '../httpErrorResponseHandler';
-import { IAddon, IAddonProvider } from 'interfaces/addons';
-
-interface IAddonsResponse {
-    addons: IAddon[];
-    providers: IAddonProvider[];
-}
+import { AddonsSchema } from 'openapi';
 
 const useAddons = (options: SWRConfiguration = {}) => {
     const fetcher = async () => {
@@ -20,7 +15,7 @@ const useAddons = (options: SWRConfiguration = {}) => {
 
     const KEY = `api/admin/addons`;
 
-    const { data, error } = useSWR<IAddonsResponse>(KEY, fetcher, options);
+    const { data, error } = useSWR<AddonsSchema>(KEY, fetcher, options);
     const [loading, setLoading] = useState(!error && !data);
 
     const refetchAddons = useCallback(() => {

frontend/src/interfaces/addons.ts

@@ -1,29 +1,3 @@
-import { ITagType } from './tags';
-
-export interface IAddon {
-    provider: string;
-    parameters: Record<string, any>;
-    id: number;
-    events: string[];
-    projects?: string[];
-    environments?: string[];
-    enabled: boolean;
-    description: string;
-}
-
-export interface IAddonProvider {
-    description: string;
-    displayName: string;
-    documentationUrl: string;
-    events: string[];
-    name: string;
-    parameters: IAddonProviderParams[];
-    tagTypes: ITagType[];
-    installation?: IAddonInstallation;
-    alerts?: IAddonAlert[];
-    deprecated?: string;
-}
-
 export interface IAddonInstallation {
     url: string;
     warning?: string;