Don't show empty connected models when deleting a connection (#3302)

opendatahub-io · Oct 4, 2024 · 3c4f40d · 3c4f40d
1 parent 3e5d40f
commit 3c4f40d
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 32 deletions.
diff --git a/frontend/src/pages/projects/screens/detail/connections/ConnectionsDeleteModal.tsx b/frontend/src/pages/projects/screens/detail/connections/ConnectionsDeleteModal.tsx
@@ -123,38 +123,42 @@ export const ConnectionsDeleteModal: React.FC<Props> = ({
                   ) : null}
                 </>
               ) : null}
-              <ExpandableSectionToggle
-                isExpanded={modelsExpanded}
-                onToggle={setModelsExpanded}
-                id="expand-connected-models-toggle"
-                contentId="expanded-connected-models"
-                data-testid="connections-delete-models-toggle"
-              >
-                <span>Model deployments </span>
-                <Badge isRead data-testid="connections-delete-models-count">
-                  {connectedModels.length}
-                </Badge>
-              </ExpandableSectionToggle>
-              {modelsExpanded ? (
-                <ExpandableSection
-                  isExpanded
-                  isDetached
-                  toggleId="expand-connected-models-toggle"
-                  contentId="expanded-connected-models"
-                >
-                  <TextContent>
-                    <TextList>
-                      {connectedModels.map((model) => (
-                        <TextListItem
-                          key={model.metadata.name}
-                          data-testid="connections-delete-models-item"
-                        >
-                          {getDisplayNameFromK8sResource(model)}
-                        </TextListItem>
-                      ))}
-                    </TextList>
-                  </TextContent>
-                </ExpandableSection>
+              {connectedModels.length ? (
+                <>
+                  <ExpandableSectionToggle
+                    isExpanded={modelsExpanded}
+                    onToggle={setModelsExpanded}
+                    id="expand-connected-models-toggle"
+                    contentId="expanded-connected-models"
+                    data-testid="connections-delete-models-toggle"
+                  >
+                    <span>Model deployments </span>
+                    <Badge isRead data-testid="connections-delete-models-count">
+                      {connectedModels.length}
+                    </Badge>
+                  </ExpandableSectionToggle>
+                  {modelsExpanded ? (
+                    <ExpandableSection
+                      isExpanded
+                      isDetached
+                      toggleId="expand-connected-models-toggle"
+                      contentId="expanded-connected-models"
+                    >
+                      <TextContent>
+                        <TextList>
+                          {connectedModels.map((model) => (
+                            <TextListItem
+                              key={model.metadata.name}
+                              data-testid="connections-delete-models-item"
+                            >
+                              {getDisplayNameFromK8sResource(model)}
+                            </TextListItem>
+                          ))}
+                        </TextList>
+                      </TextContent>
+                    </ExpandableSection>
+                  ) : null}
+                </>
               ) : null}
             </>
           )}

diff --git a/...d/src/pages/projects/screens/detail/connections/__tests__/ConnectionsDeleteModal.spec.tsx b/...d/src/pages/projects/screens/detail/connections/__tests__/ConnectionsDeleteModal.spec.tsx
@@ -90,4 +90,28 @@ describe('Delete connection modal', () => {
     expect(modelsItems[0]).toHaveTextContent('Deployed model 1');
     expect(modelsItems[1]).toHaveTextContent('Deployed model 2');
   });
+
+  it('should not show empty related resources', async () => {
+    const deleteConnection = mockConnection({ displayName: 'connection1', description: 'desc1' });
+
+    useRelatedNotebooksMock.mockReturnValue({
+      notebooks: [],
+      loaded: true,
+    });
+    useInferenceServicesForConnectionMock.mockReturnValue([]);
+    render(
+      <ConnectionsDeleteModal
+        namespace={deleteConnection.metadata.namespace}
+        deleteConnection={deleteConnection}
+        onClose={onClose}
+        onDelete={onDelete}
+      />,
+    );
+
+    const notebooksCountBadge = screen.queryByTestId('connections-delete-notebooks-toggle');
+    expect(notebooksCountBadge).toBeFalsy();
+
+    const modelsCountBadge = screen.queryByTestId('connections-delete-models-toggle');
+    expect(modelsCountBadge).toBeFalsy();
+  });
 });