added feature flag for new connection change

frontend/src/pages/projects/screens/detail/overview/configuration/ConfigurationSection.tsx

@@ -15,6 +15,7 @@ import DividedGallery from '~/concepts/design/DividedGallery';
 import InfoGalleryItem from '~/concepts/design/InfoGalleryItem';
 import { ProjectSectionID } from '~/pages/projects/screens/detail/types';
 import { ProjectDetailsContext } from '~/pages/projects/ProjectDetailsContext';
+import useConnectionTypesEnabled from '~/concepts/connectionTypes/useConnectionTypesEnabled'; // Import feature flag hook
 
 const accessReviewResource: AccessReviewResourceAttributes = {
   group: 'rbac.authorization.k8s.io',
@@ -27,6 +28,7 @@ const ConfigurationSection: React.FC = () => {
   const [open, setOpen] = React.useState<boolean>(true);
   const { currentProject } = React.useContext(ProjectDetailsContext);
   const projectSharingEnabled = useIsAreaAvailable(SupportedArea.DS_PROJECTS_PERMISSIONS).status;
+  const connectionTypesEnabled = useConnectionTypesEnabled(); // Get flag value
   const [allowCreate, rbacLoaded] = useAccessReview({
     ...accessReviewResource,
     namespace: currentProject.metadata.name,
@@ -69,27 +71,50 @@ const ConfigurationSection: React.FC = () => {
             )
           }
         />
-        <InfoGalleryItem
-          sectionType={SectionType.setup}
-          imgSrc={typedObjectImage(ProjectObjectType.dataConnection)}
-          title="Connections"
-          description={
-            <TextContent>
-              <Text component="small">
-                Connections enable you to store and retrieve information that typically should not
-                be stored in code. For example, you can store details (including credentials) for
-                object storage, databases, and more. You can then attach the connections to
-                artifacts in your project, such as workbenches and model servers.
-              </Text>
-            </TextContent>
-          }
-          isOpen={open}
-          onClick={() =>
-            navigate(
-              `/projects/${currentProject.metadata.name}?section=${ProjectSectionID.CONNECTIONS}`,
-            )
-          }
-        />
+        {connectionTypesEnabled ? (
+          <InfoGalleryItem
+            sectionType={SectionType.setup}
+            imgSrc={typedObjectImage(ProjectObjectType.dataConnection)}
+            title="Connections"
+            description={
+              <TextContent>
+                <Text component="small">
+                  Connections enable you to store and retrieve information that typically should not
+                  be stored in code. For example, you can store details (including credentials) for
+                  object storage, databases, and more. You can then attach the connections to
+                  artifacts in your project, such as workbenches and model servers.
+                </Text>
+              </TextContent>
+            }
+            isOpen={open}
+            onClick={() =>
+              navigate(
+                `/projects/${currentProject.metadata.name}?section=${ProjectSectionID.CONNECTIONS}`,
+              )
+            }
+          />
+        ) : (
+          <InfoGalleryItem
+            sectionType={SectionType.setup}
+            imgSrc={typedObjectImage(ProjectObjectType.dataConnection)}
+            title="Data connections"
+            description={
+              <TextContent>
+                <Text component="small">
+                  You can add data connections to workbenches to connect your project to data inputs
+                  and object storage buckets. You can also use data connections to specify the
+                  location of your models during deployment.
+                </Text>
+              </TextContent>
+            }
+            isOpen={open}
+            onClick={() =>
+              navigate(
+                `/projects/${currentProject.metadata.name}?section=${ProjectSectionID.DATA_CONNECTIONS}`,
+              )
+            }
+          />
+        )}
         {showPermissions ? (
           <InfoGalleryItem
             sectionType={SectionType.setup}