fix: add add integration to all sub menus and hide integrations page

src/App.tsx

@@ -9,10 +9,7 @@ import { BsLink, BsToggles } from "react-icons/bs";
 import { FaBell, FaTasks } from "react-icons/fa";
 import { HiUser } from "react-icons/hi";
 import { ImLifebuoy } from "react-icons/im";
-import {
-  MdOutlineIntegrationInstructions,
-  MdOutlineSupportAgent
-} from "react-icons/md";
+import { MdOutlineSupportAgent } from "react-icons/md";
 import { VscJson } from "react-icons/vsc";
 import {
   BrowserRouter,
@@ -214,14 +211,14 @@ const settingsNav: SettingsNavigationItems = {
       icon: MdOutlineSupportAgent,
       featureName: features.agents,
       resourceName: tables.database
-    },
-    {
-      name: "Integrations",
-      href: "/settings/integrations",
-      icon: MdOutlineIntegrationInstructions,
-      featureName: features["settings.integrations"],
-      resourceName: tables.database
     }
+    // {
+    //   name: "Integrations",
+    //   href: "/settings/integrations",
+    //   icon: MdOutlineIntegrationInstructions,
+    //   featureName: features["settings.integrations"],
+    //   resourceName: tables.database
+    // }
   ].sort((v1, v2) => stringSortHelper(v1.name, v2.name))
 };
 

src/components/Integrations/Add/steps/AddIntegrationOptionsList.tsx

@@ -2,6 +2,9 @@ import { Icon } from "@flanksource-ui/components/Icon";
 import { LogsIcon } from "@flanksource-ui/components/Icons/LogsIcon";
 import { SearchInListIcon } from "@flanksource-ui/components/Icons/SearchInListIcon";
 import { TopologyIcon } from "@flanksource-ui/components/Icons/TopologyIcon";
+import { useFeatureFlagsContext } from "@flanksource-ui/context/FeatureFlagsContext";
+import { features } from "@flanksource-ui/services/permissions/features";
+import { useMemo } from "react";
 import { TupleToUnion } from "type-fest";
 
 export const createIntegrationOption = [
@@ -20,6 +23,90 @@ export type CreateIntegrationOption = TupleToUnion<
   typeof createIntegrationOption
 >;
 
+type CreateIntegrationOptionMap = {
+  name: CreateIntegrationOption;
+  icon: React.ReactNode;
+  category: "Add Via GitOps" | "Add Directly";
+};
+
+export const options = new Map<
+  CreateIntegrationOption,
+  CreateIntegrationOptionMap
+>([
+  [
+    "AWS",
+    {
+      category: "Add Via GitOps",
+      icon: <Icon key="aws-icon" name="aws" />,
+      name: "AWS"
+    }
+  ],
+  [
+    "Azure",
+    {
+      category: "Add Via GitOps",
+      icon: <Icon key="azure-icon" name="azure" />,
+      name: "Azure"
+    }
+  ],
+  [
+    "Prometheus",
+    {
+      category: "Add Via GitOps",
+      icon: <Icon key="prometheus-icon" name="prometheus" />,
+      name: "Prometheus"
+    }
+  ],
+  [
+    "Flux",
+    {
+      category: "Add Via GitOps",
+      icon: <Icon key="flux-icon" name="flux" />,
+      name: "Flux"
+    }
+  ],
+  [
+    "Kubernetes",
+    {
+      category: "Add Via GitOps",
+      icon: <Icon key="kubernetes-icon" name="kubernetes" />,
+      name: "Kubernetes"
+    }
+  ],
+  [
+    "Mission Control",
+    {
+      category: "Add Via GitOps",
+      icon: <Icon key="mission-control-icon" name="mission-control" />,
+      name: "Mission Control"
+    }
+  ],
+  [
+    "Custom Topology",
+    {
+      category: "Add Directly",
+      icon: <TopologyIcon className="h-5 w-5" key="topology-icon" />,
+      name: "Custom Topology"
+    }
+  ],
+  [
+    "Catalog Scraper",
+    {
+      category: "Add Directly",
+      icon: <SearchInListIcon className="h-5 w-5" key="catalog-icon" />,
+      name: "Catalog Scraper"
+    }
+  ],
+  [
+    "Log Backends",
+    {
+      category: "Add Directly",
+      icon: <LogsIcon className="h-5 w-5" key="logs-icon" />,
+      name: "Log Backends"
+    }
+  ]
+]);
+
 export const IntegrationsOptionToIconMap = new Map<
   CreateIntegrationOption,
   React.ReactNode
@@ -48,27 +135,68 @@ type AddTopologyOptionsListProps = {
 export default function AddIntegrationOptionsList({
   onSelectOption
 }: AddTopologyOptionsListProps) {
+  const { isFeatureDisabled } = useFeatureFlagsContext();
+
+  const isLogsFeatureDisabled = useMemo(
+    () => isFeatureDisabled(features.logs),
+    [isFeatureDisabled]
+  );
+
   return (
     <div className="flex flex-col gap-2">
-      <div className="flex flex-wrap p-2">
-        {createIntegrationOption.map((item) => {
-          return (
-            <div className="flex flex-col w-1/4 p-2" key={item}>
-              <div
-                role="button"
-                className="flex flex-col items-center space-y-2 justify-center p-2 border border-gray-300 hover:border-blue-200 hover:bg-gray-100 rounded-md text-center h-20"
-                onClick={(e) => {
-                  onSelectOption(item);
-                }}
-              >
-                <div className="flex flex-col items-center justify-center">
-                  {IntegrationsOptionToIconMap.get(item)}
+      <div className="flex flex-col gap-2 p-4">
+        <div className="font-semibold px-2">Add via GitOps</div>
+        <div className="flex flex-wrap">
+          {Array.from(options)
+            .filter(([key, value]) => value.category === "Add Via GitOps")
+            .map(([, item]) => {
+              return (
+                <div className="flex flex-col w-1/4 p-2" key={item.name}>
+                  <div
+                    role="button"
+                    className="flex flex-col items-center space-y-2 justify-center p-2 border border-gray-300 hover:border-blue-200 hover:bg-gray-100 rounded-md text-center h-20"
+                    onClick={(e) => {
+                      onSelectOption(item.name);
+                    }}
+                  >
+                    <div className="flex flex-col items-center justify-center">
+                      {IntegrationsOptionToIconMap.get(item.name)}
+                    </div>
+                    <div>{item.name}</div>
+                  </div>
+                </div>
+              );
+            })}
+        </div>
+      </div>
+      <div className="flex flex-col gap-2 p-4">
+        <div className="font-semibold px-2">Add Directly</div>
+        <div className="flex flex-wrap">
+          {Array.from(options)
+            .filter(([key, value]) => value.category === "Add Directly")
+            .filter(
+              ([key, value]) =>
+                value.name !== "Log Backends" || !isLogsFeatureDisabled
+            )
+            .map(([, item]) => {
+              return (
+                <div className="flex flex-col w-1/4 p-2" key={item.name}>
+                  <div
+                    role="button"
+                    className="flex flex-col items-center space-y-2 justify-center p-2 border border-gray-300 hover:border-blue-200 hover:bg-gray-100 rounded-md text-center h-20"
+                    onClick={(e) => {
+                      onSelectOption(item.name);
+                    }}
+                  >
+                    <div className="flex flex-col items-center justify-center">
+                      {IntegrationsOptionToIconMap.get(item.name)}
+                    </div>
+                    <div>{item.name}</div>
+                  </div>
                 </div>
-                <div>{item}</div>
-              </div>
-            </div>
-          );
-        })}
+              );
+            })}
+        </div>
       </div>
     </div>
   );

src/components/SchemaResourcePage/AddSchemaResourceModal.tsx

@@ -2,6 +2,7 @@ import { useSettingsCreateResource } from "@flanksource-ui/api/query-hooks/mutat
 import { Modal } from "@flanksource-ui/ui/Modal";
 import { useState } from "react";
 import { AiFillPlusCircle } from "react-icons/ai";
+import AddIntegrationModal from "../Integrations/Add/AddIntegrationModal";
 import HealthSpecEditor from "../SpecEditor/HealthSpecEditor";
 import { SchemaResourceEdit } from "./SchemaResourceEdit";
 import { SchemaResourceType } from "./resourceTypes";
@@ -24,6 +25,14 @@ export default function AddSchemaResourceModal({
     }
   );
 
+  if (
+    resourceInfo.table === "config_scrapers" ||
+    resourceInfo.table === "topologies" ||
+    resourceInfo.table === "logging_backends"
+  ) {
+    return <AddIntegrationModal refresh={onClose} />;
+  }
+
   return (
     <>
       <button type="button" className="" onClick={() => setModalIsOpen(true)}>

src/components/SchemaResourcePage/index.tsx

@@ -3,7 +3,6 @@ import { BreadcrumbNav, BreadcrumbRoot } from "../BreadcrumbNav";
 import ErrorPage from "../Errors/ErrorPage";
 import { Head } from "../Head/Head";
 import { SearchLayout } from "../Layout";
-import AddTopologyResourceModal from "../Topology/Settings/AddTopologyResourceModal";
 import AddSchemaResourceModal from "./AddSchemaResourceModal";
 import { SchemaResourceList } from "./SchemaResourceList";
 import { SchemaResourceType } from "./resourceTypes";
@@ -37,22 +36,11 @@ export function SchemaResourcePage({
               >
                 {name}
               </BreadcrumbRoot>,
-              // for topology, we want to show the add topology resource modal,
-              // which supports being linked to directly via the url
-              ...(resourceInfo.name === "Topology"
-                ? [
-                    <AddTopologyResourceModal
-                      key={"add-resource"}
-                      onClose={() => refetch()}
-                    />
-                  ]
-                : [
-                    <AddSchemaResourceModal
-                      key={"add-resource"}
-                      onClose={() => refetch()}
-                      resourceInfo={resourceInfo!}
-                    />
-                  ])
+              <AddSchemaResourceModal
+                key={"add-resource"}
+                onClose={() => refetch()}
+                resourceInfo={resourceInfo!}
+              />
             ]}
           />
         }