feat: introduce connections page in the admin panel

packages/web/src/components/AdminApplicationConnections/index.tsx

@@ -0,0 +1,55 @@
+import { Link } from 'react-router-dom';
+import { useQuery } from '@apollo/client';
+import CircularProgress from '@mui/material/CircularProgress';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import type { IConnection } from '@automatisch/types';
+
+import { GET_APP_CONNECTIONS } from 'graphql/queries/get-app-connections';
+import * as URLS from 'config/urls';
+import useFormatMessage from 'hooks/useFormatMessage';
+import NoResultFound from 'components/NoResultFound';
+
+import AppConnectionRow from './AppConnectionRow';
+
+type AdminApplicationConnectionsProps = { appKey: string };
+
+function AdminApplicationConnections(
+  props: AdminApplicationConnectionsProps
+): React.ReactElement {
+  const { appKey } = props;
+  const formatMessage = useFormatMessage();
+  const { data, loading } = useQuery(GET_APP_CONNECTIONS, {
+    variables: { key: appKey },
+  });
+  const appConnections: IConnection[] = data?.getApp?.connections || [];
+
+  if (loading)
+    return <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />;
+
+  if (appConnections.length === 0) {
+    return (
+      <NoResultFound
+        to={URLS.ADMIN_APP_CONNECTIONS_CREATE(appKey)}
+        text={formatMessage('adminAppsConnections.noConnections')}
+      />
+    );
+  }
+
+  return (
+    <div>
+      {appConnections.map((appConnection) => (
+        <AppConnectionRow key={appConnection.id} connection={appConnection} />
+      ))}
+      <Stack justifyContent="flex-end" direction="row">
+        <Link to={URLS.ADMIN_APP_CONNECTIONS_CREATE(appKey)}>
+          <Button variant="contained" sx={{ mt: 2 }} component="div">
+            {formatMessage('adminAppsConnections.createConnection')}
+          </Button>
+        </Link>
+      </Stack>
+    </div>
+  );
+}
+
+export default AdminApplicationConnections;