From 5315a67d742667fbda692abca5ade4a64d420163 Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <62331820+DanielHougaard@users.noreply.github.com>
Date: Fri, 12 Apr 2024 01:46:11 +0200
Subject: [PATCH] Feat: Disable integration creation when no environments are
 present on project

---
 .../integrations/NoEnvironmentsBanner.tsx     | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 frontend/src/components/integrations/NoEnvironmentsBanner.tsx

diff --git a/frontend/src/components/integrations/NoEnvironmentsBanner.tsx b/frontend/src/components/integrations/NoEnvironmentsBanner.tsx
new file mode 100644
index 000000000..2dc931d8c
--- /dev/null
+++ b/frontend/src/components/integrations/NoEnvironmentsBanner.tsx
@@ -0,0 +1,32 @@
+import { useRouter } from "next/router";
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Button } from "../v2";
+
+interface IProps {
+  projectId: string;
+}
+
+export const NoEnvironmentsBanner = ({ projectId }: IProps) => {
+  const router = useRouter();
+
+  return (
+    <div className="mt-4 flex w-full flex-row items-center rounded-md border border-primary-600/70  bg-primary/[.07] p-4 text-base text-white">
+      <FontAwesomeIcon icon={faWarning} className="pr-6 text-6xl text-white/80" />
+      <div className="flex w-full flex-col text-sm">
+        <span className="mb-2 text-lg font-semibold">
+          No environments in your project was found
+        </span>
+        <p className="prose">
+          In order to use integrations, you need to create at least one environment in your project.
+        </p>
+      </div>
+      <div className="my-2">
+        <Button onClick={() => router.push(`/project/${projectId}/settings#environments`)}>
+          Add environments
+        </Button>
+      </div>
+    </div>
+  );
+};