added feature flag for new connection change

opendatahub-io · Oct 9, 2024 · f1c557e · f1c557e
1 parent 4e3ed4f
commit f1c557e
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 39 deletions.
diff --git a/frontend/src/pages/home/aiFlows/ProjectsGallery.tsx b/frontend/src/pages/home/aiFlows/ProjectsGallery.tsx
@@ -5,13 +5,15 @@ import InfoGalleryItem from '~/concepts/design/InfoGalleryItem';
 import { SupportedArea } from '~/concepts/areas';
 import useIsAreaAvailable from '~/concepts/areas/useIsAreaAvailable';
 import useServingPlatformStatuses from '~/pages/modelServing/useServingPlatformStatuses';
+import useConnectionTypesEnabled from '~/concepts/connectionTypes/useConnectionTypesEnabled';
 import InfoGallery from './InfoGallery';
 
 const ProjectsGallery: React.FC<{ onClose: () => void }> = ({ onClose }) => {
   const { status: pipelinesAvailable } = useIsAreaAvailable(SupportedArea.DS_PIPELINES);
   const { status: modelServingAvailable } = useIsAreaAvailable(SupportedArea.MODEL_SERVING);
   const servingPlatformStatuses = useServingPlatformStatuses();
   const modelMeshEnabled = servingPlatformStatuses.modelMesh.enabled;
+  const connectionTypesEnabled = useConnectionTypesEnabled();
 
   const getProjectDescriptionAdditionalText = () => {
     if (pipelinesAvailable && modelServingAvailable) {
@@ -66,24 +68,43 @@ const ProjectsGallery: React.FC<{ onClose: () => void }> = ({ onClose }) => {
       }
       isOpen
     />,
-    <InfoGalleryItem
-      key="connections"
-      data-testid="ai-flows-connections-info"
-      title="Connections"
-      imgSrc={typedObjectImage(ProjectObjectType.dataConnection)}
-      sectionType={SectionType.organize}
-      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
-    />,
+    connectionTypesEnabled ? (
+      <InfoGalleryItem
+        key="connections"
+        data-testid="ai-flows-connections-info"
+        title="Connections"
+        imgSrc={typedObjectImage(ProjectObjectType.dataConnection)}
+        sectionType={SectionType.organize}
+        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
+      />
+    ) : (
+      <InfoGalleryItem
+        key="data-connections"
+        data-testid="ai-flows-data-connections-info"
+        title="Data connections"
+        imgSrc={typedObjectImage(ProjectObjectType.dataConnection)}
+        sectionType={SectionType.organize}
+        description={
+          <TextContent>
+            <Text component="small">
+              You can add data connections to link your project and its workbenches to data sources,
+              and to object storage buckets which save data and models that you want to deploy.
+            </Text>
+          </TextContent>
+        }
+        isOpen
+      />
+    ),
     <InfoGalleryItem
       key="storage"
       data-testid="ai-flows-storage-info"

diff --git a/frontend/src/pages/projects/screens/detail/overview/configuration/ConfigurationSection.tsx b/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';
 
 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();
   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}