feat: Add feature flag customization and astra tracking (#6963)

* Add feature flag customization and astra tracking

* [autofix.ci] apply automated fixes

* add external url check

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

src/frontend/src/CustomNodes/GenericNode/components/NodeDialogComponent/index.tsx

@@ -10,6 +10,7 @@ import {
 } from "@/components/ui/dialog";
 import { usePostTemplateValue } from "@/controllers/API/queries/nodes/use-post-template-value";
 import { getCustomParameterTitle } from "@/customization/components/custom-parameter";
+import { track } from "@/customization/utils/analytics";
 import { mutateTemplate } from "@/CustomNodes/helpers/mutate-template";
 import useAlertStore from "@/stores/alertStore";
 import useFlowStore from "@/stores/flowStore";
@@ -122,6 +123,20 @@ export const NodeDialog: React.FC<NodeDialogProps> = ({
       nodeClass.tool_mode,
     );
 
+    if (nodeId.toLowerCase().includes("astra") && name === "database_name") {
+      const {
+        cloud_provider: cloudProvider,
+        new_database_name: databaseName,
+        ...otherFields
+      } = fieldValues;
+      track("Database Created", {
+        nodeId,
+        cloudProvider,
+        databaseName,
+        ...otherFields,
+      });
+    }
+
     setTimeout(() => {
       handleCloseDialog();
     }, 5000);

src/frontend/src/CustomNodes/hooks/use-handle-new-value.ts

@@ -81,6 +81,10 @@ const useHandleOnNewValue = ({
       // Debounced tracking
       track("Component Edited", { nodeId });
 
+      if (nodeId.toLowerCase().includes("astra") && name === "database_name") {
+        track("Database Selected", { nodeId, databaseName: changes.value });
+      }
+
       if (!template) {
         setErrorData({ title: "Template not found in the component" });
         return;

src/frontend/src/components/core/appHeaderComponent/components/AccountMenu/index.tsx

@@ -1,4 +1,6 @@
 import { useLogout } from "@/controllers/API/queries/auth";
+import CustomFeatureFlagDialog from "@/customization/components/custom-feature-flag-dialog";
+import CustomFeatureFlagMenuItems from "@/customization/components/custom-feature-flag-menu-items";
 import { CustomFeedbackDialog } from "@/customization/components/custom-feedback-dialog";
 import { CustomHeaderMenuItemsTitle } from "@/customization/components/custom-header-menu-items-title";
 import { CustomProfileIcon } from "@/customization/components/custom-profile-icon";
@@ -22,6 +24,8 @@ import ThemeButtons from "../ThemeButtons";
 
 export const AccountMenu = () => {
   const [isFeedbackOpen, setIsFeedbackOpen] = useState(false);
+  const [isCustomFeatureFlagsOpen, setIsCustomFeatureFlagsOpen] =
+    useState(false);
   const { customParam: id } = useParams();
   const version = useDarkStore((state) => state.version);
   const navigate = useCustomNavigate();
@@ -99,14 +103,19 @@ export const AccountMenu = () => {
               </>
             )}
             {ENABLE_DATASTAX_LANGFLOW ? (
-              <HeaderMenuItemButton onClick={() => setIsFeedbackOpen(true)}>
+              <>
-                <span
+                <HeaderMenuItemButton onClick={() => setIsFeedbackOpen(true)}>
-                  data-testid="menu_feedback_button"
+                  <span
-                  id="menu_feedback_button"
+                    data-testid="menu_feedback_button"
-                >
+                    id="menu_feedback_button"
-                  Feedback
+                  >
-                </span>
+                    Feedback
-              </HeaderMenuItemButton>
+                  </span>
+                </HeaderMenuItemButton>
+                <CustomFeatureFlagMenuItems
+                  onClick={() => setIsCustomFeatureFlagsOpen(true)}
+                />
+              </>
             ) : (
               <HeaderMenuItemLink newPage href="https://docs.langflow.org">
                 <span data-testid="menu_docs_button" id="menu_docs_button">
@@ -168,6 +177,10 @@ export const AccountMenu = () => {
         isOpen={isFeedbackOpen}
         setIsOpen={setIsFeedbackOpen}
       />
+      <CustomFeatureFlagDialog
+        isOpen={isCustomFeatureFlagsOpen}
+        setIsOpen={setIsCustomFeatureFlagsOpen}
+      />
     </>
   );
 };

src/frontend/src/controllers/API/api.tsx

@@ -46,9 +46,12 @@ function ApiInterceptor() {
           config.headers["Authorization"] = `Bearer ${accessToken}`;
         }
 
-        for (const [key, value] of Object.entries(customHeaders)) {
+        if (!isExternalURL(url)) {
-          config.headers[key] = value;
+          for (const [key, value] of Object.entries(customHeaders)) {
+            config.headers[key] = value;
+          }
         }
+
         return [url, config];
       },
     });
@@ -115,6 +118,23 @@ function ApiInterceptor() {
       }
     };
 
+    // Check for external url which we don't want to add custom headers to
+    const isExternalURL = (url: string): boolean => {
+      const EXTERNAL_DOMAINS = [
+        "https://raw.githubusercontent.com",
+        "https://api.github.com",
+        "https://api.segment.io",
+        "https://cdn.sprig.com",
+      ];
+
+      try {
+        const parsedURL = new URL(url);
+        return EXTERNAL_DOMAINS.some((domain) => parsedURL.origin === domain);
+      } catch (e) {
+        return false;
+      }
+    };
+
     // Request interceptor to add access token to every request
     const requestInterceptor = api.interceptors.request.use(
       (config) => {

src/frontend/src/customization/components/custom-feature-flag-dialog.tsx

@@ -0,0 +1,11 @@
+const CustomFeatureFlagDialog = ({
+  isOpen,
+  setIsOpen,
+}: {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+}) => {
+  return <></>;
+};
+
+export default CustomFeatureFlagDialog;

src/frontend/src/customization/components/custom-feature-flag-menu-items.tsx

@@ -0,0 +1,5 @@
+const CustomFeatureFlagMenuItems = ({ onClick }: { onClick?: () => void }) => {
+  return <></>;
+};
+
+export default CustomFeatureFlagMenuItems;