From 8145f12e1ecb9985d6ae926badb0d3cf96d9e56d Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Thu, 10 Oct 2024 00:15:59 +0530
Subject: [PATCH] chore: handled feature flag for integrations (#1419)

Co-authored-by: akshat5302 <akshatjain9782@gmail.com>
---
 .../(projects)/settings/imports/page.tsx      |  2 +-
 web/ee/components/integration/guide.tsx       | 63 ++++++++-----------
 web/ee/constants/workspace.ts                 |  4 ++
 web/ee/hooks/store/use-flag.ts                |  5 +-
 4 files changed, 36 insertions(+), 38 deletions(-)

diff --git a/web/app/[workspaceSlug]/(projects)/settings/imports/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/imports/page.tsx
index 36dc2c3aa3..ec45d1f5c4 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/imports/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/imports/page.tsx
@@ -30,7 +30,7 @@ const ImportsPage = observer(() => {
   const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
   const isDarkMode = currentUserProfile?.theme.theme === "dark";
   const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - Imports` : undefined;
-  const isSiloIntegrationEnabled = useFlag(workspaceSlug?.toString(), "SILO_INTEGRATION") || true;
+  const isSiloIntegrationEnabled = useFlag(workspaceSlug?.toString(), "SILO_INTEGRATION");
   const siloBaseUrl = config?.silo_base_url;
 
   if (!isAdmin)
diff --git a/web/ee/components/integration/guide.tsx b/web/ee/components/integration/guide.tsx
index 065add59a2..ed5b649bf3 100644
--- a/web/ee/components/integration/guide.tsx
+++ b/web/ee/components/integration/guide.tsx
@@ -3,55 +3,46 @@
 import { observer } from "mobx-react";
 import Image from "next/image";
 import Link from "next/link";
-import { useParams, useSearchParams } from "next/navigation";
+import { useParams } from "next/navigation";
 import { Button } from "@plane/ui";
-// hooks
-import { useInstance, useWorkspace } from "@/hooks/store";
-import SiloIframe from "@/plane-web/components/iframe/silo-iframe";
 // constants
 import { IMPORTERS_LIST } from "@/plane-web/constants/workspace";
+// plane web hooks
+import { useFlag } from "@/plane-web/hooks/store";
 
 const IntegrationGuide = observer(() => {
-  const { currentWorkspace } = useWorkspace();
-
   // router
   const { workspaceSlug } = useParams();
-  const searchParams = useSearchParams();
-  const provider = searchParams.get("provider");
 
-  const { config } = useInstance();
   return (
     <>
-      {(!provider || provider === "csv") && (
-        <>
-          {IMPORTERS_LIST.map((service) => (
-            <div
-              key={service.provider}
-              className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100  px-4 py-6 flex-shrink-0"
-            >
-              <div className="flex items-start gap-4">
-                <div className="relative h-10 w-10 flex-shrink-0">
-                  <Image src={service.logo} layout="fill" objectFit="cover" alt={`${service.title} Logo`} />
+      {workspaceSlug &&
+        IMPORTERS_LIST.map(
+          (service) =>
+            useFlag(workspaceSlug?.toString(), service.key) && (
+              <div
+                key={service.provider}
+                className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100  px-4 py-6 flex-shrink-0"
+              >
+                <div className="flex items-start gap-4">
+                  <div className="relative h-10 w-10 flex-shrink-0">
+                    <Image src={service.logo} layout="fill" objectFit="cover" alt={`${service.title} Logo`} />
+                  </div>
+                  <div>
+                    <h3 className="flex items-center gap-4 text-sm font-medium">{service.title}</h3>
+                    <p className="text-sm tracking-tight text-custom-text-200">{service.description}</p>
+                  </div>
                 </div>
-                <div>
-                  <h3 className="flex items-center gap-4 text-sm font-medium">{service.title}</h3>
-                  <p className="text-sm tracking-tight text-custom-text-200">{service.description}</p>
+                <div className="flex-shrink-0">
+                  <Link href={`/${workspaceSlug}/settings/imports/${service.provider}`}>
+                    <span>
+                      <Button variant="primary">{service.type}</Button>
+                    </span>
+                  </Link>
                 </div>
               </div>
-              <div className="flex-shrink-0">
-                <Link href={`/${workspaceSlug}/settings/imports/${service.provider}`}>
-                  <span>
-                    <Button variant="primary">{service.type}</Button>
-                  </span>
-                </Link>
-              </div>
-            </div>
-          ))}
-          {currentWorkspace && currentWorkspace.id && (
-            <SiloIframe srcBase={`${config?.silo_base_url}?view=dashboard`} />
-          )}
-        </>
-      )}
+            )
+        )}
     </>
   );
 });
diff --git a/web/ee/constants/workspace.ts b/web/ee/constants/workspace.ts
index c8c78e19f0..18e884b410 100644
--- a/web/ee/constants/workspace.ts
+++ b/web/ee/constants/workspace.ts
@@ -2,6 +2,8 @@
 import { WORKSPACE_SETTINGS as WORKSPACE_SETTINGS_CE } from "@/ce/constants/workspace";
 // components
 import { SettingIcon } from "@/components/icons/attachment";
+// constants
+import { E_FEATURE_FLAGS } from "@/plane-web/hooks/store";
 // logos
 import JiraLogo from "@/public/services/jira.svg";
 import LinearLogo from "@/public/services/linear.svg";
@@ -58,6 +60,7 @@ export const WORKSPACE_SETTINGS_LINKS = [
 
 export const IMPORTERS_LIST = [
   {
+    key: E_FEATURE_FLAGS.SILO_JIRA_INTEGRATION,
     provider: "jira",
     type: "Import",
     title: "Jira",
@@ -65,6 +68,7 @@ export const IMPORTERS_LIST = [
     logo: JiraLogo,
   },
   {
+    key: E_FEATURE_FLAGS.SILO_LINEAR_INTEGRATION,
     provider: "linear",
     type: "Import",
     title: "Linear",
diff --git a/web/ee/hooks/store/use-flag.ts b/web/ee/hooks/store/use-flag.ts
index b305f3b74e..a87ab48b8c 100644
--- a/web/ee/hooks/store/use-flag.ts
+++ b/web/ee/hooks/store/use-flag.ts
@@ -20,9 +20,12 @@ export enum E_FEATURE_FLAGS {
   WORKSPACE_PAGES = "WORKSPACE_PAGES",
   ISSUE_WORKLOG = "ISSUE_WORKLOG",
   PROJECT_GROUPING = "PROJECT_GROUPING",
-  SILO_INTEGRATION = "SILO_INTEGRATION",
   ACTIVE_CYCLE_PRO = "ACTIVE_CYCLE_PRO",
   NO_LOAD = "NO_LOAD",
+  // integrations
+  SILO_INTEGRATION = "SILO_INTEGRATION",
+  SILO_JIRA_INTEGRATION = "SILO_JIRA_INTEGRATION",
+  SILO_LINEAR_INTEGRATION = "SILO_LINEAR_INTEGRATION",
 }
 
 export const useFlag = (