Add missing changes from feature/persistImprovements branch

workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/AddConnectionPopup/AddConnectionPopupContent.tsx

@@ -19,12 +19,12 @@
 import React, { useEffect, useState, useMemo, useCallback } from "react";
 import { AvailableNode, Category, Item, LinePosition } from "@wso2/ballerina-core";
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
-import { Codicon, Icon, ThemeColors, Typography, ProgressRing, Tooltip } from "@wso2/ui-toolkit";
+import { Codicon, Icon, ThemeColors, Typography, ProgressRing } from "@wso2/ui-toolkit";
 import { cloneDeep, debounce } from "lodash";
 import ButtonCard from "../../../../components/ButtonCard";
 import { ConnectorIcon } from "@wso2/bi-diagram";
 import { BodyTinyInfo } from "../../../styles";
-import { ArrowIcon, ConnectorOptionButtons, ConnectorOptionCard, ConnectorOptionContent, ConnectorOptionDescription, ConnectorOptionIcon, ConnectorOptionTitle, ConnectorOptionTitleContainer, ConnectorsGrid, ConnectorTypeLabel, CreateConnectorOptions, ExperimentalBadge, FilterButton, FilterButtons, IntroText, SearchContainer, Section, SectionHeader, SectionTitle, StyledSearchBox } from "./styles";
+import { ArrowIcon, ConnectorOptionButtons, ConnectorOptionCard, ConnectorOptionContent, ConnectorOptionDescription, ConnectorOptionIcon, ConnectorOptionTitle, ConnectorOptionTitleContainer, ConnectorsGrid, ConnectorTypeLabel, CreateConnectorOptions, FilterButton, FilterButtons, IntroText, SearchContainer, Section, SectionHeader, SectionTitle, StyledSearchBox } from "./styles";
 import { AddConnectionPopupProps } from "./index";
 
 interface Props extends AddConnectionPopupProps {
@@ -42,45 +42,6 @@ export function AddConnectionPopupContent(props: Props) {
     const [isSearching, setIsSearching] = useState(false);
     const [fetchingInfo, setFetchingInfo] = useState(false);
     const [filterType, setFilterType] = useState<"All" | "Standard" | "Organization">("All");
-    const [experimentalEnabled, setExperimentalEnabled] = useState<boolean>(false);
-    const [hasPersistConnection, setHasPersistConnection] = useState<boolean>(false);
-
-    useEffect(() => {
-        rpcClient
-            ?.getCommonRpcClient()
-            .experimentalEnabled()
-            .then((enabled) => setExperimentalEnabled(enabled))
-            .catch((err) => {
-                console.error(">>> error checking experimental flag", err);
-                setExperimentalEnabled(false);
-            });
-    }, [rpcClient]);
-
-    // Temporary fix to check for existing database Persist connection till the backend is updated to support this.
-    useEffect(() => {
-        const checkExistingDatabaseConnection = async () => {
-            if (!rpcClient || !experimentalEnabled) {
-                return;
-            }
-            try {
-                const res = await rpcClient.getBIDiagramRpcClient().getModuleNodes();
-
-                const hasDatabaseConnection = res.flowModel.connections?.some((connection) => {
-                    const metadataData = connection.metadata?.data as any;
-                    return metadataData?.connectorType === "persist";
-                });
-
-                setHasPersistConnection(hasDatabaseConnection || false);
-            } catch (error) {
-                console.error(">>> Error checking for existing database connection", error);
-                setHasPersistConnection(false);
-            }
-        };
-
-        if (experimentalEnabled) {
-            checkExistingDatabaseConnection();
-        }
-    }, [rpcClient, experimentalEnabled]);
 
     const fetchConnectors = useCallback((filter?: boolean) => {
         setFetchingInfo(true);

workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/AddConnectionPopup/styles.ts

@@ -113,16 +113,6 @@ export const ConnectorOptionTitle = styled(Typography)`
     margin: 0;
 `;
 
-export const ExperimentalBadge = styled(Typography)`
-    font-size: 12px;
-    color: ${ThemeColors.ON_SURFACE_VARIANT};
-    padding: 4px;
-    border-radius: 4px;
-    background-color: ${ThemeColors.SURFACE_CONTAINER};
-    margin: 0;
-    display: inline-block;
-`;
-
 export const ConnectorOptionDescription = styled(Typography)`
     font-size: 12px;
     color: ${ThemeColors.ON_SURFACE_VARIANT};

workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/ConnectionConfigurationPopup/index.tsx

@@ -48,7 +48,7 @@ const ConnectorInfoCard = styled.div`
     align-items: center;
     gap: 12px;
     padding: 12px;
-    margin: 16px 0;
+    margin: 16px 20px;
     border: 1px solid ${ThemeColors.OUTLINE_VARIANT};
     border-radius: 8px;
     background-color: ${ThemeColors.SURFACE_DIM};
@@ -143,7 +143,7 @@ const ConfigContent = styled.div<{ hasFooterButton?: boolean }>`
     display: flex;
     flex-direction: column;
     overflow: ${(props: { hasFooterButton?: boolean }) => props.hasFooterButton ? "hidden" : "auto"};
-    padding: 0 0 ${(props: { hasFooterButton?: boolean }) => props.hasFooterButton ? "0" : "24px"} 0;
+    padding: 0 16px ${(props: { hasFooterButton?: boolean }) => props.hasFooterButton ? "0" : "24px"} 16px;
     min-height: 0;
 `;
 
@@ -183,10 +183,6 @@ const StatusText = styled(Typography)`
     text-align: center;
 `;
 
-const FormWrap = styled.div`
-    padding: 16px;
-`;
-
 enum PullingStatus {
     FETCHING = "fetching",
     PULLING = "pulling",
@@ -233,9 +229,7 @@ export function ConnectionConfigurationPopup(props: ConnectionConfigurationPopup
                     </CloseButton>
                 </ConfigHeader>
 
-                <FormWrap>
-                    <ConnectionConfigurationForm {...props}/>
-                </FormWrap>
+                <ConnectionConfigurationForm {...props}/>
             </PopupContainer>
         </>
     );